关于 react useState 的问题?

Question

  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]);

运行的效果如下图:

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

求解答.

Answer 1

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

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

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

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

Answer 2

闭包