时间戳

首页 > 解决方案 > 无法删除列表中正确的一项

reactjs - 无法删除列表中正确的一项

问题描述

这是 App.js 中的代码

  const completeTask = (index) => {
    let itemsCopy = [...taskItems];
    itemsCopy.splice(index, 1);
    setTaskItems(itemsCopy);
  }
  var tasksArr = taskItems.map((item, index) => {
    return(
      <Todo key={index} text={item} title={index+1} completeTask={completeTask}/>    
    )
  })

这是 Todo.js

function Todo(props) {
    return (
        <div className="todo-container">
            <h2 className="todo-title">{props.title}.</h2>
            <h3 className="todo-content">{props.text}</h3>
            <button onClick={() => props.completeTask(props.key)} className="todo-delete">Delete</button>
        </div>
    )
}

当我每次单击列表上的删除按钮时，列表中的第一个将被删除。似乎它不知道正确的索引号。

标签： reactjs

解决方案

映射可删除、添加或更新的组件时，切勿使用索引作为键。

密钥对于该项目应该是唯一的。如果将其设置为索引，并且删除列表中的第一个 todo，则所有其他 todo 将获得一个新键（React 会认为 todo 1 现在是 Todo 0，Todo 2 现在是 Todo 1，等等。）这个代码可能会删除正确的项目，但 React 会因为所有待办事项的键都发生变化而感到困惑。

解决方案是使用这样的唯一键：

const [taskItems, setTaskItems] = useState([{id: 1, text: "My Todo"}, {id: 2, text: "My Other Todo"}])

const completeTask = (id) => {
    let itemsCopy = [...taskItems];

    //Find the index of that object with its id
    let index = itemsCopy.findIndex(x => x.id === id);

    itemsCopy.splice(index, 1)
    setTaskItems(itemsCopy);
  }

      var tasksArr = taskItems.map((item, index) => {
    return(
      <Todo key={item.id} id={item.id} text={item.text} title={index+1} completeTask={completeTask}/>    
    )
  })

然后在你的 Todo 组件中

function Todo(props) {
return (
    <div className="todo-container">
        <h2 className="todo-title">{props.title}.</h2>
        <h3 className="todo-content">{props.text}</h3>
        <button onClick={() => props.completeTask(props.id)} className="todo-delete">Delete</button>
    </div>
)

我不确定，但我认为您甚至无法访问 props.key。您需要使用自己的 ID。在这里阅读更多

推荐阅读