Почему Todo List в React всегда стирает последний элемент? - PullRequest
0 голосов
/ 17 марта 2020

Я пытался заставить приложение 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>

Ответы [ 2 ]

0 голосов
/ 17 марта 2020

Проблема в том, что вы используете index в качестве ключа. Поэтому последний элемент (key, который прекращает существование) удаляется, а все остальные элементы просто обновляются.

Вместо этого создайте какой-то уникальный id для своих задач и используйте это id как key.

0 голосов
/ 17 марта 2020

Вы уверены, что это так? Или кажется, что так оно и есть, потому что вы отображаете ввод без каких-либо значений? Если я вставляю ваш код (и корректирую ввод для фактического включения значения задачи) в CodeSandbox , он удаляет правильный элемент. Также учтите, что использование индексов в качестве ключей списка должно рассматриваться как «последнее средство» (см. React docs ).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...