关于 react useState 的问题?

  const [proList, setProList] = useState([])
  
  const fetchData = () => {
    console.log('check data before fetch', proList);
    if (proList && proList.length >0) { return;}
    // 获取数据
    dispatch({
      type: 'marketCenter/getProList',
    }).then((res) => {
      console.log('old proLIst:', proList);
      console.log({res});
      setProList(res);
      console.log('current proList:', proList);
      setTimeout(() => {
        console.log('late proList:', proList);
      }, 5000);
    });
  };
  
  useEffect(() => {
    fetchData();
  }, [proList]);

运行的效果如下图:
image.png

我知道 setState 是异步的, 但我想问的是, 为什么 setTimeout 里面的 log 是[],但在其之前打印的 check data before fetch 有数据.

求解答.

阅读 3.2k
2 个回答

我理解你 setTimeout 里面打印的还是第一次触发 fetchData 时的 proList 吧,这个时候proList 还是空数组。
截图里面最后一个 check data before fetch 应该是 proList 改变之后触发的第二次 fetchData 的打印,所以是有值的。

更新:
经过题主评论里面追问我才发现问题的关键点在于 useEffect 的处理函数里面的 state 保留的是定义它的那次渲染中的 state。

我手动测试之后发现这一点表现和 class 组件里面是不一样的。

react 官方文档对这个有说明:为什么我会在我的函数中看到陈旧的 props 和 state ?
也推荐一篇解析文章,很清晰得解析了这个问题
useEffect 完整指南

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题