为什么React Native组件首次渲染时useState的对象值为空？

原因说明 #

• fetch属于异步操作，不会阻塞同步代码执行
  调用fetchProduct时，内部的fetch发起的网络请求属于异步任务，会暂时脱离主线程执行，JS会立刻往下运行console.log(product)，此时接口还未返回结果，setProduct尚未触发，拿到的自然是useState设置的初始空对象{}。
• React状态更新为异步批量操作，且当前作用域状态不可变
  即使接口响应速度极快，在console.log执行前就返回了数据，调用setProduct也不会立刻修改当前渲染周期内的product值：每次组件渲染对应独立的作用域快照，当前useEffect里拿到的product永远是首次渲染对应的初始值，setProduct只会触发组件重新渲染，新的渲染周期中才能拿到更新后的product。

验证方案 #

如果需要监听product的更新结果，可以新增一个依赖product的useEffect：

useEffect(() => {
  // 每次product变化时会触发执行，拿到最新值
  console.log(product)
}, [product])

内容的提问来源于stack exchange，提问作者Sathees karan