javascript - 为什么状态没有正确存储数据？

Question

我正在通过 axios 获取数据并将其存储在一个状态中

useEffect(() => {
  getCartItems();
}, []);

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

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

我在控制台中打印数据变量，它给出以下输出

但在那之后我存储data.item在另一种状态，但它没有存储第一个状态。如果我运行console.log(abc)它只显示 24

为什么我没有得到 [32,24]

Answer 1

因为您abc在每个对 的调用中都重复使用相同的内容setAbc，所以实际上只添加了最后一个项目。请记住，状态设置器不会更改abc您正在使用的常量，它会安排对组件函数的新调用，该调用将获取abcfrom的新值useState。

根据现有数据更新数据时，应使用回调形式。此外，没有理由重复setAbc调用，只需使用所有新数据进行调用，请参阅***评论：

useEffect(() => {
    getCartItems();
},[]);
const[abc,setAbc]=useState([]);
const getCartItems = async () => {
    let data = await CartApi.get(`/${store.getState().auth.user.id}/`).then(({data})=>data);
    const items = data.map(({item}) => item);  // *** Get the items
    setAbc(abc => [...abc, ...items]);         // *** Save them
//         ^^^^^^−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− *** Use the callback form
}

（主要的解决方法是做[...abc, ...items] 一次。虽然我确实建议使用回调，但在许多情况下，只要setAbc([...abc, ...items]);你不记忆，它就可以正常工作，而且getCartItems这只在挂载或响应用户点击或类似情况下完成。 )