为什么 React 中的 Todo List 总是删除最后一项？答案

【问题标题】：Why Todo List in React erases always the last item?为什么 React 中的 Todo List 总是删除最后一项？
【发布时间】：2020-03-17 12:31:12
【问题描述】：

我一直在尝试使用 React Hooks 制作待办事项列表应用程序。

当我使用<span>{todo}</span> 时，一切正常。它只是删除我单击的元素。但是当我将<span>{todo}</span> 更改为<input></input> 时，我单击删除的每个“X”总是删除最后一个元素。我只是不知道发生了什么，因为键没有改变。

Todo.js 组件：

import React, { useState } from 'react';

const TodoForm = ({ saveTodo }) => {
  const[value, setValue] = useState('');

  return (
    <form
      onSubmit={event => {
        event.preventDefault();
        saveTodo(value);
        setValue('');
      }}
    >
      <input onChange={event => setValue(event.target.value)} value={value} />
    </form>
  )
}


const TodoList =({ todos, deleteTodo }) => (
  <ul>
    {
      todos.map((todo, index) => (
        <li key={index.toString()}>
          <span>{todo}</span>
          <button onClick={() => deleteTodo(index)}>X</button>
        </li>
      ))
    }
  </ul>
);


const Todo = () => {
  const [todos, setTodos] = useState([]);

  return (
    <div className="App">
      <h1>Todos</h1>

      <TodoForm saveTodo={todoText => {
        const trimmedText = todoText.trim();

        if(trimmedText.length > 0) {
          setTodos([...todos, trimmedText]);
        }
      }} 
    />
      <TodoList 
        todos={todos}
        deleteTodo={todoIndex => {
          const newTodos = todos.filter((_, index) => index !== todoIndex);
          setTodos(newTodos);
        }} 
      />
    </div>
  );
};

export default Todo;

当我改变时它会改变删除行为：

<li key={index.toString()}>
  <span>{todo}</span>
  <button onClick={() => deleteTodo(index)}>X</button>
</li>

到：

<li key={index.toString()}>
  <input></input>
  <button onClick={() => deleteTodo(index)}>X</button>
</li>

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

你确定是这样吗？或者它似乎只是表现得那样，因为你渲染输入时没有任何值？如果我将您的代码（并调整输入以实际包含待办事项的值）粘贴到CodeSandbox 中，它将删除正确的元素。还请考虑将索引用作列表键应该被视为“最后的手段”（参见React docs）。

【讨论】：

【解决方案2】：

问题是您使用index 作为密钥。因此，最后一项（停止存在的key）被删除，所有其他项都刚刚更新。

相反，为您的待办事项创建某种独特的id 并将该id 用作key。

【讨论】：

但是为什么当我更改为时它没有发生？