React通过axios获取数据存入state时数据不全是什么原因？

问题根因 #

1. 闭包捕获旧state值 #

你在getCartItems函数里引用的abc是函数初始化时捕获的初始值[]，循环调用setAbc的时候，每次展开的都是初始的空数组，而不是上一次更新后最新的abc值。相当于两次执行的逻辑是setAbc([...[], 32])、setAbc([...[], 24])，最后一次执行直接覆盖了前面的结果，最终abc就只剩[24]。

2. 不必要的循环调用setState #

你用map做遍历操作本身也不符合规范，map是用来生成新数组的方法，纯遍历应该用forEach，且循环调用setState会触发多次不必要的重渲染。

修复方案 #

方案1：使用setState函数式更新（适用于需要逐次更新的场景） #

函数式更新可以拿到上一次最新的state值，不会受闭包影响：

const getCartItems = async () => {
  // 这里可以直接解构拿data，不需要额外写then
  const { data } = await CartApi.get(`/${store.getState().auth.user.id}/`);
  console.log('data =>', data)
  data.forEach(a => setAbc(prevAbc => [...prevAbc, a.item]))
}

方案2：批量处理后一次性更新state（更推荐） #

先提取所有item字段生成目标数组，再一次性赋值给state，性能更好也不会有闭包问题：

const getCartItems = async () => {
  const { data } = await CartApi.get(`/${store.getState().auth.user.id}/`);
  console.log('data =>', data)
  const itemList = data.map(a => a.item)
  setAbc(itemList)
}

额外优化提示 #

如果你的项目开启了React Hooks的lint校验，会提示你需要把getCartItems加入useEffect的依赖数组，你可以把函数移动到useEffect内部避免额外的依赖处理：

const [abc, setAbc] = useState([]);

useEffect(() => {
  const getCartItems = async () => {
    const { data } = await CartApi.get(`/${store.getState().auth.user.id}/`);
    const itemList = data.map(a => a.item)
    setAbc(itemList)
  }
  getCartItems();
}, []);

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