为什么反应状态(数组)在回调函数中为空?为什么不使用外部作用域中的更新值?

Question

这个问题难倒了我。我正在尝试将值附加到现有数组，但在 onmessage 回调中，每次调用回调时状态都是空数组！我不知道为什么！任何帮助，不胜感激。

• 反应版本：16.12.0
• 节点版本：10.16.3

代码片段：

const Example = () => {
const [state, setState] = useState([]);
useEffect(() => {
axios.get("/data").then((resp) => setState(resp.data)); // Array of length of 50
const eventSource = new EventSource("/event");
eventSource.onmessage = (e) => {
console.log(state); // [] - Empty array
const data = JSON.parse(e.data);
setState([data, ...state]); // End result - state is array of length 1
}
return () => eventSource.close();
}, []);
console.log(state); // Array of length 50
// Table rendered with 50 elements
return <Table data={state} />
}

谢谢

Answer 1

尝试使用状态更新程序函数。如果你将一个函数传递给 setState，React 将使用实际状态调用它：

setState(actualState => {
return [data, ...actualState]
});

Answer 2

设置状态本质上是异步的。您的控制台.log将始终打印以前的状态值。您可以使用 useEffect 在每次状态更改时获取状态的更新值 -

useEffect(() => { console.log("value of state is", state)}, [state] // dependancy array//)