React中setState修改数组状态后无法立即渲染的问题求助

我在学习React开发待办列表应用时遇到一个问题：向存储任务的state数组添加新对象时，自己编写的addTask函数执行后，状态已更新但组件无法立即渲染，需等showForm状态变化后才会刷新；使用视频中的写法则能立即触发渲染。

相关代码 #

App.js初始化代码 #

let initialTasks = [
  {
    id: 1,
    title: "Doctor's Appointment",
    date: "10th Feb, 2023",
    reminder: true,
  },
  {
    id: 2,
    title: "College Fest",
    date: "18th Feb, 2023",
    reminder: false,
  },
  {
    id: 3,
    title: "Mid-Semester exams",
    date: "21th Feb, 2023",
    reminder: true,
  },
];

let [tasks, setTasks] = useState(initialTasks);
let [showForm, setShowForm] = useState(false);

自己编写的addTask函数（无法触发立即渲染） #

const addTask = (task) => {
  let tempTasks = tasks;
  tempTasks.push({ id: 10, ...task });
  setTasks(tempTasks);
};

视频中的可用版本（可立即触发渲染） #

const addTask = (task) => {
  const newTask = { id: 10, ...task };
  setTasks([...tasks, newTask]);
};

问题原因 #

React通过检测状态引用的变化来决定是否触发组件重渲染：

• 自己的写法中，let tempTasks = tasks只是复制了原state数组的引用，push操作直接修改了原数组（数组是引用类型），最后调用setTasks(tempTasks)时，传递的还是原来的数组引用，React会判定状态未发生变化，因此不会触发重渲染。
• 视频中的写法通过[...tasks, newTask]创建了一个全新的数组，数组的引用发生了改变，React检测到状态更新后，会立即触发组件重渲染。

解决方案 #

永远不要直接修改React的state值，而是创建新的状态副本进行修改后再更新：

• 使用数组扩展运算符创建新数组：setTasks([...tasks, newTask])
• 或者使用concat方法：setTasks(tasks.concat(newTask))
• 对于更复杂的操作，也可以使用map、filter等返回新数组的方法。

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