0

反応で状態を更新することに関連する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>
    );
}

}

4

2 に答える 2

1

コンポーネントのライフサイクル メソッドを使用することもできます。ここに詳細があります。

componentDidMountトリックを行う必要があります。次のようなことができます：

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

_filterByまたは、 componentDidMount 内でメソッドを呼び出すだけです。

お役に立てれば。

于 2016-11-19T13:25:09.453 に答える
0

あなたが提供したコードに問題はありません。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'));
于 2016-11-19T19:13:27.697 に答える