用 setState 设置状态不会改变值答案

【问题标题】：Setting state with setState doesn't change values用 setState 设置状态不会改变值
【发布时间】：2022-01-12 16:04:58
【问题描述】：

我正在从子组件的循环 (array.map) 中调用 fetchProducts，但不想在之前已经完成时调用它。只是为了测试，我添加了“i”，我在第一次调用后更新了它，但是 this.state.i === 0 总是正确的，所以我一直在获取相同的数据。

fetchProducts = async (id) => {
    if(this.state.i === 0) {
        let url = "http://localhost/mysite/wp-json/mysite/product/" + id

        await fetch(url)
        .then(response => response.json())
        .then(result => {
            this.setState({
                ...this.state,
                products: this.state.products.concat([result]),
                i: 1
            })
        })
    }
}

我在这里遗漏了什么吗？还是有更好的缓存方法？这个想法是检查 this.state.products 中的产品 ID，而不是“i”。

【问题讨论】：

标签： reactjs fetch react-state

【解决方案1】：

我有两个观察结果。

首先，一旦 promise 被解决，你就设置状态。

其次，你是通过map调用fetchProducts，是同步的。

所以，发生的事情是，您的 fetchProducts 不断被同步调用。这意味着它不会等待您之前的承诺解决。但是你在承诺解决后设置你的状态。因此，不能保证当您连续调用 fetchProducts 时，您会在之前的函数调用中设置状态。

【讨论】：