すぐに配列の状態を設定するには？

Question

私は反応の状態を更新することに関連した1つの問題に遭遇しました。

私はいくつかのデータを持っており、このデータを使ってテーブルを作成したいと考えています。しかし、私は最初にそれをフィルタリングしたいと思います。フィルタリングは正常に機能していますが、フィルタリングされたデータを更新して次のコンポーネントにスローするだけで問題はありません。（私はsetStateがすぐには動作しないことを知っています...）

ReportTableコンポーネントのupdatedReportsはまだフィルタリングされていませんデータ... それを修正し、配列の状態を更新する最も良い方法は何ですか？あなたは多分コンポーネントのライフサイクルメソッドを使用することができます

export default class ReportContent extends React.Component { 

constructor(props) { 
    super(props); 
    this.state = { 
     currentReports: this.props.reports 
    }; 
} 

_filterBy(option) { 
    let updatedReports = [...this.props.reports].filter(report => { 
     if (report.organizations === option || report.reportType === option) { 
      return report; 
     } 
    }); 
    console.log(updatedReports); 
    this.setState({currentReports: updatedReports}); 
} 

render() { 
    return (
     <div className="reports-table"> 
      <ReportMenu organizations={this.props.organizations} reportTypes={this.props.reportTypes} 
         filterBy={this._filterBy.bind(this)}/> 
      <ReportTable updatedReports={this.state.currentReports}/> 
     </div> 
    ); 
} 

}

Answer 1

提供したコードに問題はありません。 setStateは、正しく呼び出された場合に動作するはずです。問題はあなたの他のコンポーネントやデータの中にあるということです。

コードを使用するスニペットです。他のコンポーネントをどのように実装するのか分かりませんので、ここでいくつかの前提を立てました。

class ReportMenu extends React.Component { 
    render() { 
     return <div className="well well-default"> 
      <select className="form-control" onChange={(e) => { 
       this.props.filterBy(e.target.value) 
      }}> 
       <option> - </option> 
       {this.props.organizations.map(
        (item, index) => <option key={index}>{item}</option> 
       )} 
      </select> 
      <br/> 
      <select className="form-control" onChange={(e) => { 
       this.props.filterBy(e.target.value) 
      }}> 
       <option> - </option> 
       {this.props.reportTypes.map(
        (item, index) => <option key={index}>{item}</option> 
       )} 
      </select> 
     </div> 
    } 
} 

class ReportTable extends React.Component { 
    render() { 
     return <table className="table table-bordered"> 
      <tbody> 
       {this.props.updatedReports.map(
        (item, index) => <tr key={index}> 
         <td>{index}</td> 
         <td>{item.organizations}</td> 
         <td>{item.reportType}</td> 
        </tr> 
       )} 
      </tbody> 
     </table> 
    } 
} 

class ReportContent extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      currentReports: this.props.reports 
     }; 
    } 
    _filterBy(option) { 
     let updatedReports = this.props.reports.filter(report => { 
      if (report.organizations === option || report.reportType === option) { 
       return report; 
      } 
     }); 
     console.log(updatedReports); 
     this.setState({currentReports: updatedReports}); 
    } 
    render() { 
     return (
      <div className="reports-table"> 
       <ReportMenu 
        organizations={this.props.organizations} 
        reportTypes={this.props.reportTypes} 
        filterBy={this._filterBy.bind(this)}/> 
       <ReportTable updatedReports={this.state.currentReports}/> 
      </div> 
     ); 
    } 
} 

class App extends React.Component { 
    render() { 
     const reports = [ 
      { 
       organizations: 'orgA', 
       reportType: 'typeA' 
      }, { 
       organizations: 'orgA', 
       reportType: 'typeB' 
      }, { 
       organizations: 'orgB', 
       reportType: 'typeA' 
      }, { 
       organizations: 'orgB', 
       reportType: 'typeB' 
      } 
     ]; 
     return <div className="container"> 
      <h1 className="page-header">Reports</h1> 
      <ReportContent 
       reports={reports} 
       organizations={['orgA', 'orgB']} 
       reportTypes={['typeA', 'typeB']}/> 
     </div> 
    } 
} 

ReactDOM.render(<App/>, document.getElementById('root')); 

Answer 2

。 Here is more info.

componentDidMountはすべきことです。

componentDidMount(){ 
    let updatedReports = [...this.props.reports].filter(report => { 
     if (report.organizations === option || report.reportType === option) { 
      return report; 
     } 
    }); 
    this.setState({currentReports: updatedReports}); 
} 

それともcomponentDidMount中にあなたの方法_filterByを呼び出す：あなたはこのような何かを行うことができます。

これが役に立ちます。