除非使用超时，否则 React setstate 在 IE 中不起作用

Question

我有以下方法，使用 whatwg-fetch 进行服务调用。 setstate 不适用于 IE 浏览器。它适用于其他浏览器。

在 settimeout 中包含 setstate 后，它在 IE 中运行良好。

不确定此超时是否会影响它在产品服务器中的部署以及响应时间延迟的增加。请建议我为这个问题提供一个理想的解决方案。谢谢！

        fetch("/local/addThings").then(res => res.json())
            .then(
                (result) => {
                 setTimeout(() => {
                    this.setState({
                        value: "edit",
                        items: result
                    });
                     }, 1000);
                       }
            )
            .catch(error => console.error('Error:', error));
    }```

Answer 1

这可能是因为获得结果的时间延迟。您可以在设置状态之前放入条件语句以检查是否已收到结果。

fetch("/local/addThings").then(res => res.json())
  .then(
    (result) => {
      if (result) {
        this.setState({
          value: "edit",
          items: result
        });
      }
    } else {
      setTimeout(() => {
        this.setState({
            value: "edit",
            items: result
        });
         }, 1000);
    }
  )
  .catch(error => console.error('Error:', error));
}

我还注意到您有两个 .then 语句。如果你用第一个这样设置状态呢？

fetch("/local/addThings")
  .then(res => 
    this.setState({
      value: "edit",
      items: res
    })
  )
  .catch(error => console.error('Error:', error));
}

Answer 2

这可能与 setState 异步有关：

您可以尝试删除 setTimeout 并给 setState 一个函数而不是一个对象，如下所示：

this.setState(() => ({
  value: "edit",
  items: result
}));

Answer 3

这是因为在 React 中调用 setState() 是异步的，它并不总是立即更新组件。请查看official documentation 关于setState()。

您可以使用componentDidUpdate 或setState 回调(setState(updater, callback))，保证在应用更新后会触发其中任何一个。我们只需要在回调中获取更新的状态：

this.setState({ value: "edit", items: result },()=>{
    console.log(this.state.value); //any function u want to call after state changed
});