为什么回调函数中的react state(array)为空？为什么它不使用外部范围的更新值？

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

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

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