React中useState无法保存GET接口返回值的技术问题

你的问题核心原因及修复方案如下：

问题根源 #

1. 接口返回的是包含categories数组的对象，但你直接把整个对象存入了初始为数组的dataCat状态中，后续如果把dataCat当作数组使用，自然无法获取到数据
2. React状态更新是异步的，若在setDataCat之后立刻打印dataCat，看到的会是更新前的旧值，容易误以为状态没更新

修正代码 #

将setDataCat(data)改为setDataCat(data.categories)，直接存入需要的数组数据：

useEffect(() => {
  const fetchData = async () =>{
    try {
      const {data} = await axios.get('https://localhost/get-all');
      console.log(data);
      // 只存入categories数组而非整个返回对象
      setDataCat(data.categories)
    } catch (error) {
      console.error(error.message);
    }
  }

  fetchData();
}, []);

验证状态更新的正确方式 #

不要在setDataCat后立即打印状态，可通过组件渲染输出，或用useEffect监听dataCat变化来确认：

useEffect(() => {
  console.log('更新后的dataCat:', dataCat);
}, [dataCat]);

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