如何立即爲數組設置狀態？

Question

我遇到了一個與更新狀態有關的問題。

那麼，我有一些數據，我想用這些數據建立一個表。但是，我想先過濾它。過濾運行良好，但我只有更新過濾的數據並將其投擲到下一個組件...（我知道setState不能立即工作...）

已更新reportReable組件中的報表仍未過濾data ... 什麼是修復它並使用更新數組狀態的最佳方法。

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}); 
} 

或者只是打電話給你的方法_filterBy內componentDidMount。

希望這會有所幫助。