React useState似乎不适用于对象

Question

这应该是基本的，但是出于对我的爱，我不知道为什么它不起作用。

所以我正在这样定义const状态：

const [panels, setPanels] = useState(null);

然后我正在对API运行axios调用。做console.log(response.data)会给我一个类似于此的对象：

{
  products: {
    basic: {...},
    intermediate: {...},
    advanced: {...}
  },
  services: {
    one_off: {...},
    weekly: {...},
    monthly: {...}
  }
}

当我执行setPanels(response.data)之后，接着执行console.log(panels)时，我希望得到与bove类似的结果，但是相反，我会得到 null

我也尝试过这样定义它：

const [panels, setPanels] = useState({});

在axios上结果如下：

let prods = response.data;
setPanels({...panels, prods});

但是随后在控制台中我得到了：

我在这里想念什么？

Answer 1

@Konstantin在评论中感到悲伤，useState是异步的，面板值将在下一个渲染中更新，而不是在使用setPanels时保持不变。

在文档中感到悲伤

  

setState函数用于更新状态。它接受一个新的   状态值，并重新渲染组件。

     

在随后的重新渲染期间，useState返回的第一个值   应用更新后，它将始终是最新状态。