如何使用for循环将输入框值推入new todos数组（React场景）

当前代码的问题 #

1. newTodos是函数内的局部变量，每次组件渲染都会重新初始化，推入数据后没有同步到list状态，导致页面无变化
2. 现有循环会把输入框的每个字符拆成单独的Todo项，不符合常规Todo添加逻辑

方案1：将输入内容作为单个Todo项（基于for循环实现） #

如果需要把输入框的整段内容作为一个Todo项，用for循环完成推入操作，代码修改如下：

import { useState } from 'react';
// 记得导入AiFillDelete组件：import { AiFillDelete } from 'react-icons/ai';

function App() {
  const [list, setList] = useState([]);
  const [input, setInput] = useState("");

  function addTodo(input) {
    if (!input.trim()) return; // 过滤空输入
    const newTodos = [...list]; // 复制现有Todo列表，遵循React状态不可变原则
    // 用for循环推入单个Todo项（循环1次即可）
    for (let i = 0; i < 1; i++) {
      newTodos.push({
        id: Date.now(), // 用时间戳生成唯一ID
        todo: input.trim()
      });
    }
    setList(newTodos); // 更新状态，触发页面渲染
    setInput(""); // 清空输入框
  } 

  const deleteTodo = (id) => {
    const newList = list.filter((todo) => todo.id !== id);
    setList(newList);
  };

  return (
    <div>
      <h1>Todo List</h1>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
      />
      <button onClick={() => addTodo(input)}>Add</button>
      <ul> 
        {list.map((todo) => (
          <li key={todo.id}>
            {todo.todo}
            <button onClick={() => deleteTodo(todo.id)}><AiFillDelete /></button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

方案2：批量添加多个Todo项（基于for循环拆分输入） #

如果需要输入用逗号分隔的多个Todo（比如"买菜,做饭,洗碗"），用for循环拆分并逐个推入数组，代码如下：

import { useState } from 'react';
// import { AiFillDelete } from 'react-icons/ai';

function App() {
  const [list, setList] = useState([]);
  const [input, setInput] = useState("");

  function addTodo(input) {
    if (!input.trim()) return;
    // 拆分输入内容，去除空项和多余空格
    const todoItems = input.split(",").map(item => item.trim()).filter(item => item);
    const newTodos = [...list];
    // 用for循环遍历所有待添加的Todo项，逐个推入数组
    for (let i = 0; i < todoItems.length; i++) {
      newTodos.push({
        id: Date.now() + i, // 时间戳加索引保证ID唯一
        todo: todoItems[i]
      });
    }
    setList(newTodos);
    setInput("");
  } 

  const deleteTodo = (id) => {
    const newList = list.filter((todo) => todo.id !== id);
    setList(newList);
  };

  return (
    <div>
      <h1>Todo List</h1>
      <input
        type="text"
        placeholder="用逗号分隔多个Todo"
        value={input}
        onChange={(e) => setInput(e.target.value)}
      />
      <button onClick={() => addTodo(input)}>Add</button>
      <ul> 
        {list.map((todo) => (
          <li key={todo.id}>
            {todo.todo}
            <button onClick={() => deleteTodo(todo.id)}><AiFillDelete /></button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

关键注意点 #

• 永远不要直接修改React状态，必须基于原状态创建新数组后再更新
• 每个Todo项需要唯一的id，否则map渲染时会报错
• 添加完成后清空输入框，提升用户操作体验

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