React Todo列表removeItem函数无法删除项问题求助

问题根源分析 #

1. 直接修改原状态数组：removeItem中itemsArr = itemList是引用赋值，splice直接修改了原状态数组，React检测不到状态引用变化，因此不会触发组件重渲染。
2. 索引查找逻辑不可靠：通过文本内容innerText查找索引，遇到重复Todo项时会删除错误的条目。
3. 数据状态不同步：删除操作仅更新了itemList，但未同步更新存储全量数据的actualItem，导致清除搜索后已删除的项会重新出现。

修复后的完整代码 #

import { useState } from 'react';

function TodoList() {
  const [item, setItem] = useState("");
  // 存储全量Todo数据
  const [itemList, setItemList] = useState([]);
  // 存储过滤后的数据，用于渲染
  const [filteredList, setFilteredList] = useState([]);

  function addItem() {
    if (!item.trim()) return; // 空内容不添加
    const newList = [...itemList, item];
    setItemList(newList);
    setFilteredList(newList);
    setItem("");
  }

  function filterVal(e) {
    const keyword = e.target.value.trim();
    if (keyword.length > 3) {
      const filteredArr = itemList.filter(item => item.includes(keyword));
      setFilteredList(filteredArr);
    } else {
      setFilteredList(itemList);
    }
  }

  function removeItem(index) {
    // 创建新数组，排除要删除的项
    const newList = itemList.filter((_, i) => i !== index);
    setItemList(newList);
    setFilteredList(newList);
  }

  console.log("render");

  return (
    <div className="body">
      <div className="search">
        <input type="text" onChange={filterVal} placeholder="Search Here" />
      </div>
      <div className="addItem">
        <input
          type="text"
          placeholder="Add here"
          value={item}
          onChange={(e) => setItem(e.target.value)}
        />
        <button className="btn" onClick={addItem}>Add Item</button>
        <ul className="display">
          {filteredList.length === 0 ? (
            <h1>No Items</h1>
          ) : (
            filteredList.map((item, index) => {
              return (
                <div className="li" key={index}>
                  <li>{item}</li>
                  {/* 直接传递当前项的索引给删除函数，避免DOM查找 */}
                  <p onClick={() => removeItem(index)}>✖</p>
                </div>
              );
            })
          )}
        </ul>
        <button
          className="clearBtn"
          onClick={() => {
            setItemList([]);
            setFilteredList([]);
          }}
        >Clear All</button>
      </div>
    </div>
  );
}

export default TodoList;

关键修复点说明 #

• 拆分状态职责：用itemList存储全量数据，filteredList存储过滤后的数据，避免搜索时修改原始数据，保证删除操作的准确性。
• 避免直接修改原数组：删除时使用filter创建新数组，确保状态引用发生变化，触发React重渲染。
• 直接传递索引：删除按钮点击时直接传递当前项的index，无需通过DOM查找文本内容，逻辑更可靠。
• 同步更新所有相关状态：删除和添加操作时同时更新itemList和filteredList，保证数据一致性。
• 空值校验：添加项时判断内容是否为空，避免添加空条目。

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