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

Question

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

在我将设置状态包含在设置超时中后，它在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()是异步的，它并不总是立即更新组件。请查看有关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
});