如何立即为数组设置状态？

Question

我在 react 中遇到了一个与更新状态有关的问题。

嗯，我有一些数据，我想用这些数据构建一个表。但是，我想先过滤它。过滤效果很好，但我只有更新过滤数据并将其扔给下一个组件的问题......（我知道 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

您也许可以使用组件生命周期方法。 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。

希望这会有所帮助。

Answer 2

您提供的代码没有问题。如果调用正确，setState 应该可以工作。我敢打赌，问题出在您的其他组件或数据中。

这是一个使用您的代码的 sn-p。我不知道你是如何实现其他组件的，所以我只是在这里做了一些假设。

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