为什么回调函数中的 react state(array) 为空?为什么不使用外部范围的更新值?
Why is react state(array) empty inside callback function? Why is it not using the updated value from outer scope?
这个问题难倒了我。我正在尝试将值附加到现有数组,但在 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} />
}
谢谢
设置状态本质上是异步的。您的 console.log 将始终打印状态的先前值。您可以使用 useEffect 在每次更改时获取状态的更新值 -
useEffect(() => { console.log("value of state is", state)}, [state] // dependancy array//)
尝试使用状态更新器功能。如果您将函数传递给 setState,React 将使用实际状态调用它:
setState(actualState => {
return [data, ...actualState]
});
这个问题难倒了我。我正在尝试将值附加到现有数组,但在 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} />
}
谢谢
设置状态本质上是异步的。您的 console.log 将始终打印状态的先前值。您可以使用 useEffect 在每次更改时获取状态的更新值 -
useEffect(() => { console.log("value of state is", state)}, [state] // dependancy array//)
尝试使用状态更新器功能。如果您将函数传递给 setState,React 将使用实际状态调用它:
setState(actualState => {
return [data, ...actualState]
});