时间戳

首页 > 解决方案 > 为什么 React 中的 Todo List 总是删除最后一项？

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

问题描述

我一直在尝试使用 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>

标签： reactjsreact-hooks

解决方案

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

推荐阅读