Question

我在使用下面给出的代码时遇到问题。我想在我的数组中添加一个新的任务对象，所以首先我尝试在任务数组中找到最大 id，并将 maxId+1 作为 id 给我的新对象。然后我尝试在最后附加我的新 Task 对象，但是在我调用 setTasks 后数据没有更新。

任何帮助将不胜感激

  const[tasks,setTasks] = useState([
    {
        id:1,
        text:"Task1",
        day:"21.06.2021",
        reminder : true
    },
    {
        id:2,
        text:"Task2",
        day:"21.06.2021",
        reminder : false
    },
    {
        id:3,
        text:"Task3",
        day:"22.06.2021",
        reminder : true
    }

  ])

  const addTask = (task) => {
    var id = 0
    for (const t of tasks){
      if (t.id > id){
        id = t.id+1
      }
    }
    console.log("Before",tasks)
    const newTask = {id, ...task}
    setTasks([...tasks, newTask])
    console.log("After",tasks)
  }

Answer 1

这是 React 中的正常行为。在处理程序内触发 setTasks 时，即使在触发 setTasks 之后，tasks 仍具有旧值。但是，当组件刷新时，如果您使用 useEffect，您会看到，现在该值已刷新。下面是一个带有更新数组和 console.log 打印状态的简单示例：

https://codesandbox.io/s/lively-fast-q2yxn?file=/src/App.js

import React, { useEffect, useState } from "react";

export default function App() {
  /**
   * component state:
   */
  const [array, setArray] = useState([]);
  const [count, setCount] = useState(0);
  /**
   * handler:
   */
  const addItemToArray = () => {
    setArray((a) => [...a, count]);
    setCount((c) => c + 1);
    console.log("inside handler: ", array);
  };
  /**
   * useEffect:
   */
  useEffect(() => {
    console.log("inside useEffect: ", array);
  }, [array]);

  return (
    <div className="App">
      <button onClick={addItemToArray}>Add Item to Array</button>
    </div>
  );
}

Answer 2

您似乎重置了 id

行中的旧 const newTask = {id, ...task}

试试这个代码，它可能会解决你的问题。如果没有，那么您肯定在其他地方有问题。

const[tasks,setTasks] = useState([
    {
        id:1,
        text:"Task1",
        day:"21.06.2021",
        reminder : true
    },
    {
        id:2,
        text:"Task2",
        day:"21.06.2021",
        reminder : false
    },
    {
        id:3,
        text:"Task3",
        day:"22.06.2021",
        reminder : true
    }

  ])

  const addTask = (task) => {
    const id = 0
    for (const t of tasks){
      if (t.id > id){
        id = t.id+1
      }
    }

    console.log("Before",tasks)
    const newTask = {...task, id}
    setTasks([...tasks, newTask])
    console.log("After",tasks)
  }

React js useState 数组不更新

2 个答案: