Question

我有一个函数，我在子组件的forEach循环中运行，该函数必须过滤数据并用结果更新状态。问题是，当我使用循环迭代函数时，它同时运行所有并且在此内部，状态将不会正确地更新数据。问题是如何更好地实现它，可能有一种使用Promise或async / await的方法，或者可能更简单的方法来实现它。根据需要放入队列并等待状态更新。

简化代码在这里
组件孩子

this.props.data.forEach((item, i) => {
    this.props.update(item);
});

组件父

function update(data) {
    let filtered = this.state.data.filter(item => item.uid !== data.uid);
    this.setState({data: filtered});
}

Answer 1

如果我理解得很清楚，你需要这样的东西：

update = () => {
    let filtered = this.state.data.filter(x => this.props.data.every(y => x.uid !== y.uid))
    this.setState({
        data: filtered
    })
}

Answer 2

为什么不在父组件中迭代数组？

子：

this.props.update(this.props.data); // pass the entire array

父：

function update(data) {
    let filtered = data.map(d=> {
        return this.state.data.filter(item => item.uid !== d.uid);
    }
    this.setState({data: filtered});
}

将调用放入队列并等待更新React.js中的状态

2 个答案: