React中使用useState更新/赋值二维数组时状态不更新问题

核心原因：useState更新的异步特性 #

React的useState更新是异步批量执行的，你在调用setUpdatedList之后立刻执行console.log(updatedList)，此时状态还未完成更新，所以打印的仍是初始值。

正确的调试与更新方式 #

1. 查看更新后的状态
   不要在setUpdatedList后直接打印，通过useEffect监听状态变化来查看最新值：

   useEffect(() => {
     console.log("更新后的updatedList:", updatedList);
   }, [updatedList]); // 依赖项设为updatedList，状态变化时自动触发
   

2. 正确的状态更新写法
   你的需求是用接口返回的数组替换原状态，而非追加，所以不需要展开原数组拼接：

   // 直接替换为接口返回的数组即可
   setUpdatedList(resData.data.list);
   

   你之前用setUpdatedList(updatedList=>[...updatedList,resData.data.list])会把新数组作为元素追加到原数组中，变成[[1,2],[1,2], [[122,4,...], ...]]，这不符合预期。

3. 额外排查点

   • 先验证接口返回数据：在setUpdatedList前打印resData.data.list，确认是你需要的二维数组：

     console.log("接口返回的list:", resData.data.list);
     

   • 确保请求逻辑在useEffect中执行，避免组件重复渲染时反复发起请求：

     useEffect(() => {
       const fetchList = async () => {
         try {
           const resData = await axios.post("/getlist");
           if (resData.status === 200) {
             setUpdatedList(resData.data.list);
           }
         } catch (e) {
           console.error("请求失败:", e); // 打印具体错误信息，方便排查问题
         }
       };
       fetchList();
     }, []); // 空依赖数组确保仅在组件挂载时请求一次
     

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