React useState设置对象数组后值为null问题求助

问题核心 #

你当前的代码存在两个关键错误，导致tasks状态无法正确设置：

1. 从localStorage解析出daytask（本身已是数组）后，错误地用setTasks([daytask])将其包裹为二维数组，而非直接赋值。
2. 尝试的函数式更新写法setState(prevState => ({ ...prevState, daytask}))混淆了数组与对象的更新逻辑，把数组状态错误转为对象类型。

另外，控制台出现null的情况，大概率是接口返回response.data为null，或auth/loginStatusID变化导致useEffect重复执行时未进入分支，没有更新状态。

修正方案 #

1. 正确处理localStorage数据赋值 #

直接将解析后的数组赋值给tasks，无需额外包裹：

const daytask = JSON.parse(todaysTask);
setTasks(daytask); // 直接传入数组，而非[daytask]

2. 接口请求添加兜底处理 #

防止接口返回null/undefined导致tasks变为null：

Axios.get(`http://localhost:3001/tasks/podoDB/getTask?userID=${loginStatusID}`)
  .then((response) => {
    setTasks(response.data || []); // 兜底为空数组
  })
  .catch((error) => {
    console.error("Error Getting task:", error);
    setTasks([]); // 请求失败时重置为空数组
  });

3. 数组类型的正确函数式更新写法 #

如果需要基于之前的状态更新（比如追加任务），应使用数组展开语法：

// 追加任务场景示例（当前需求无需，仅作参考）
setTasks(prevTasks => [...prevTasks, ...newTasks]);

完整修正代码 #

const [tasks, setTasks] = useState([]);

useEffect(() => {
  const userTasks = async () => {
    if (auth && loginStatusID) {
      const todaysTask = localStorage.getItem("TodaysTasks");

      console.log(todaysTask);

      if (todaysTask !== null) {
        try {
          const daytask = JSON.parse(todaysTask);
          // 确保解析后是数组，兜底处理
          setTasks(Array.isArray(daytask) ? daytask : []);
        } catch (e) {
          console.error("解析localStorage任务数据失败:", e);
          setTasks([]);
        }
      } else {
        Axios.get(
          `http://localhost:3001/tasks/podoDB/getTask?userID=${loginStatusID}`,
        )
          .then((response) => {
            setTasks(Array.isArray(response.data) ? response.data : []);
          })
          .catch((error) => {
            console.error("Error Getting task:", error);
            setTasks([]);
          });
      }
    } else {
      // 当auth或loginStatusID无效时，重置tasks为空数组
      setTasks([]);
    }
  };

  userTasks();
}, [auth, loginStatusID]);

useEffect(() => {
  console.log("当前tasks状态:", tasks);
}, [tasks]);

额外说明 #

• 添加try/catch包裹JSON.parse，避免localStorage数据格式错误导致代码崩溃。
• 增加Array.isArray校验，确保设置给tasks的始终是数组类型，避免类型不一致引发的异常。
• 当auth或loginStatusID无效时，主动重置tasks为空数组，避免状态残留。

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