React中如何向state数组添加元素？待办清单开发疑问

嘿，我来帮你搞定这个在React里更新待办任务数组的问题！核心原则很简单：永远不要直接修改原数组，而是通过创建新数组的方式来更新state，这样React才能正确捕捉到状态变化并重新渲染组件。

具体实现步骤 #

假设你已经用useState初始化了tasks：

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

你可以通过以下方式添加新任务：

1. 先校验输入：避免添加空任务（可选但很实用）
2. 使用函数式更新+展开运算符：确保拿到最新的state，并创建新数组

下面是完整的添加任务函数示例：

const handleAddTask = () => {
  // 跳过空输入
  if (!inputText.trim()) return;

  // 用函数式更新获取最新的tasks状态，创建新数组添加任务
  setTasks(prevTasks => [
    ...prevTasks, // 复制原数组所有元素
    { 
      id: Date.now(), // 用时间戳做唯一ID，方便后续删除/修改
      text: inputText,
      completed: false // 可选：标记任务是否完成
    }
  ]);

  // 清空输入框
  setInputText('');
  
  // 处理动画触发（如果需要的话）
  setTriggerAnimation(true);
  setTimeout(() => setTriggerAnimation(false), 500); // 动画结束后重置状态
};

关键细节解释 #

• 为什么用函数式更新？ 当新状态依赖于之前的状态时，setTasks(prevTasks => ...)能确保你拿到的是最新的tasks值，避免闭包导致的旧状态问题。
• 为什么用展开运算符？ [...prevTasks]会创建一个原数组的浅拷贝，再加上新任务，这样就不会修改原state的引用，React能正确检测到变化。
• 不要直接修改原数组！ 比如tasks.push(inputText)这种写法是错误的，因为原数组的引用没有改变，React不会触发重新渲染。

如果你的任务不需要额外属性（比如仅存字符串），也可以简化成：

setTasks(prevTasks => [...prevTasks, inputText]);

这样就能顺利添加新任务到你的待办清单啦！

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