React useEffect中用axios请求数据后setState状态仍为空如何解决

React的状态更新为异步批量执行机制，调用setOrders后不会立刻修改当前函数作用域下的orders变量，本次函数执行周期内拿到的还是状态更新前的旧值（即初始的空数组），因此紧跟在setOrders后的打印操作只能拿到旧值，并非状态赋值失败。

• 新增监听orders变化的副作用钩子，状态更新后会自动触发打印：

useEffect(() => {
  console.log('更新后的orders值：', orders);
}, [orders]);

• 在组件的JSX结构中直接渲染orders内容即可直观看到数据，示例：

<div>{JSON.stringify(orders)}</div>

如果后续需要基于新的orders值做逻辑处理，不要直接在setOrders后调用逻辑，要么放在上面监听orders的useEffect中执行，要么直接用result.data做后续计算处理即可。

内容的提问来源于stack exchange，提问作者William Mandang