为什么在回调函数中反应状态（数组）为空？ 为什么不使用来自外部范围的更新值？

Question

This problem has stumped me. I'm trying to append values to existing array, but inside the onmessage callback, state is an empty array every time the callback is called! I'm not able to figure out why! Any help is appreciated.

• React version: 16.12.0
• Node version: 10.16.3

Code snippet:

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} />
}

Thanks

Answer 1

Setting a state is async in nature. Your console.log will always print the previous value of state. You can use useEffect to get the updated value of state everytime it changes -

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

Answer 2

Try using the state updater function. If you pass a function to setState, React will call it with the actual state:

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