ES6中map函数未更新问题：ToDo列表添加任务后无显示

嘿，我踩过好多次这个坑！核心问题出在React的状态更新规则上——你直接用push()修改allTasks原数组的操作，React根本检测不到状态变化，所以组件不会重新渲染，map函数自然也就不会更新显示新增的任务啦。

背后的原因：React依赖不可变数据更新 #

React的状态更新是基于引用比较的：当你调用状态更新函数时，如果传入的新值和旧值的引用完全一样（比如直接修改原数组后再传回去），React会认为状态没有变化，就不会触发组件重新渲染。而push()是直接修改原数组的内容，数组本身的引用并没有改变，所以React“看不到”你加了新任务。

正确的解决方法：创建新数组来更新状态 #

你需要创建一个全新的数组，把原任务和新任务都包含进去，再传给状态更新函数。常用的几种写法：

1. 扩展运算符（最常用）

const addTask = (newTask) => {
  // 用扩展运算符复制原数组，再加入新任务，生成新数组
  setAllTasks([...allTasks, newTask]);
}

2. 函数式更新（更安全的场景）
   如果你的更新依赖于之前的状态（比如连续添加任务），推荐用函数式更新来确保拿到最新的状态值：

const addTask = (newTask) => {
  setAllTasks(prevTasks => [...prevTasks, newTask]);
}

3. concat方法
   也可以用数组的concat()方法，它会返回一个新数组而不修改原数组：

const addTask = (newTask) => {
  setAllTasks(allTasks.concat(newTask));
}

错误写法对比（别再这么写啦！） #

之前的错误写法大概是这样的：

// ❌ 错误：直接修改原数组，React检测不到变化
const addTask = (newTask) => {
  allTasks.push(newTask);
  setAllTasks(allTasks); // 这里传的还是原数组的引用
}

只要换成上面的正确写法，组件就能感知到状态变化，重新渲染后map函数就会显示新增的任务啦！

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