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
有数据.
求解答.
我理解你 setTimeout 里面打印的还是第一次触发
fetchData
时的proList
吧,这个时候proList
还是空数组。截图里面最后一个
check data before fetch
应该是proList
改变之后触发的第二次fetchData
的打印,所以是有值的。更新:
经过题主评论里面追问我才发现问题的关键点在于 useEffect 的处理函数里面的 state 保留的是定义它的那次渲染中的 state。
我手动测试之后发现这一点表现和 class 组件里面是不一样的。
react 官方文档对这个有说明:为什么我会在我的函数中看到陈旧的 props 和 state ?
也推荐一篇解析文章,很清晰得解析了这个问题
useEffect 完整指南