尝试设置对象数组后，React useState 为 null

Question

日常任务没有正确设置

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

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

      console.log(todaysTask);

      if (todaysTask !== null) {
        const daytask = JSON.parse(todaysTask);
        setTasks([daytask]);
      } else {
        Axios.get(
          `http://localhost:3001/tasks/podoDB/getTask?userID=${loginStatusID}`,
        )
          .then((response) => {
            setTasks(response.data);
          })
          .catch((error) => {
            console.error("Error Getting task:", error);
          });
      }
    }
  };

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

useEffect(() => {
  console.log(tasks);
}, [tasks]);

尝试过

setState(prevState => ({ ...prevState, daytask}));

退货：

[{"taskID":4012,"task":"hjfksdj","date":"2024-04-12T00:00:00.000Z","descrip":"mw,mds"},{"taskID":4014,"task":"jvkfndklfew","date":"2024-04-12T00:00:00.000Z","descrip":"edwre"},{"taskID":4011,"task":"jkfner","date":"2024-04-19T00:00:00.000Z","descrip":"refrwefr"},{"taskID":4013,"task":"sdjk","date":"2024-04-25T00:00:00.000Z","descrip":"sdkdk"}]
ToDoList.js:98 updated null

ToDoList.js:98 更新的 null 应该返回解析的对象数组

console.log(daytask)

退货：

0: {taskID: 4012, task: 'hjfksdj', date: '2024-04-12T00:00:00.000Z', descrip: 'mw,mds'}
1: {taskID: 4014, task: 'jvkfndklfew', date: '2024-04-12T00:00:00.000Z', descrip: 'edwre'}
2: {taskID: 4011, task: 'jkfner', date: '2024-04-19T00:00:00.000Z', descrip: 'refrwefr'}
3: {taskID: 4013, task: 'sdjk', date: '2024-04-25T00:00:00.000Z', descrip: 'sdkdk'}

Answer 1

代码运行良好。我已经简化了它并将其放入这个沙箱中：

沙盒链接

我唯一能想到的是，如果你的存储状态无法用

JSON.parse()

正确解析，因为这会导致空值被放入

tasks

。

简化版：

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

  useEffect(() => {
    const userTasks = async () => {
      const todaysTask = '["test"]';

      console.log(todaysTask);

      if (todaysTask !== null) {
        const daytask = JSON.parse(todaysTask);
        setTasks([daytask]);
      }
    };

    userTasks();
  }, []);

  useEffect(() => {
    console.log(tasks);
  }, [tasks]);