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

这个问题把我难住了。我试图将值附加到现有数组中，但在onmessage回调中，每次调用回调时，state都是一个空数组！我不知道为什么！感谢您的帮助

• 反应版本：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} />
}

const示例=（）=>{
const[state，setState]=useState（[]）；
useffect（（）=>{
get（“/data”）。然后（（resp）=>setState（resp.data））；//长度为50的数组
const eventSource=new eventSource（“/event”）；
eventSource.onmessage=（e）=>{
console.log（状态）；//[]-空数组
const data=JSON.parse（e.data）；
setState（[data，…state]）；//最终结果-状态是长度为1的数组
}
return（）=>eventSource.close（）；
}, []);
console.log（state）；//长度为50的数组
//用50个元素呈现的表
返回
}

---

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

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

---

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

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

---

同样的问题！！在我的例子中，它是一个对象{}，而不是一个数组@atin singh的解决方案，它对我有效。通过将[state，setState]设置为{}解决了依赖关系数组的问题，该数组包含在扁平列表中的数组，并在回调函数中呈现。它就像一个符咒！