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

【问题标题】：Put calls in a queue and waiting for updating the state in React.js将调用放入队列并等待更新 React.js 中的状态
【发布时间】：2018-02-05 10:40:05
【问题描述】：

我有一个在子组件的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});
}

【问题讨论】：

你能解释一下你想用这种行为实现什么吗？为什么不在运行循环后更新状态？
@DanielAndrei 抱歉，已经更新了示例，所以应该使用过滤变量更新状态。

标签： javascript reactjs loops promise async-await

【解决方案1】：

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

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

【讨论】：

谢谢，但它不起作用。我需要等到状态更新，然后在循环中运行下一个函数，或者我需要在更新函数中创建一个队列并等待每个过滤器结果。因为现在它只是重新保存过滤后的变量，只有循环中的最后一个函数才能正常工作。
setState(updater, [callback]) 是一个异步函数。所以你可以用回调检查状态是否更新： this.setState({ data: data }, () => { this.stateUpdated(); });还要检查这个：facebook.github.io/react/docs/react-component.html#setstate
没有机会回答，感谢您在这里发表评论。我没有找到任何更好的解决方案，只使用 setTimeout 所以在迭代器里面放 setTimeout(() => this.props.update(item))

【解决方案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});
}

【讨论】：

您必须稍微更改逻辑以使其符合您的需求。我不知道你到底想做什么
我无法将数组传递给更新函数，因为它只能接受一个对象。这是因为它在全局范围内使用，应该可以只更新一个 uid。