Reactjs не делает мое состояние должным образом

Question

This это мое приложение todo, сделанное с ReactJS. Я не могу правильно удалить todo.

Он всегда удаляет последнее задание, независимо от того, что я нажимаю.

Пример: Если я нажму, чтобы удалить «Купить носки», он удалит «Oi them». Если я попытаюсь проверить состояние списка в отладчике, он удалит правильный ToDo.

Я загрузил код в GitHub repository, это была установка с помощью приложения create-react-app, которое должно быть очень простым в настройке.

Из того, что я понимаю, запись todo, которую я удаляю в состоянии TodoList, не удаляет состояние удаленных детей и, следовательно, не перестает существовать.

Как я могу позаботиться об этом? Что я делаю не так?

Подсказка: here является сутью ненужным кодом удален.

Answer 1

Прямо сейчас у вашей функции deleteTodo есть неправильный this, связанный с ней. Функция deleteTodo хочет установить состояние родительского компонента и вызывает this.setState(). Однако связан в конструкторе дочернего элемента. Вы хотите связать this с deleteTodo в конгенекторе родительского компонента: TodoList.

Таким образом, когда функция вызывается, она правильно установит состояние TodoList с новым, отфильтрованным списком todos.

Так что более конкретно об изменениях, необходимых в коде, который вы опубликовали.

Первый в конструкторе ToDoList, связывают deleteTodo

this.deleteTodo = this.deleteTodo.bind(this) 

Теперь, когда this.setState вызывается в функции deleteTodo будет установка состояния правильного компонента.

Теперь нам нужно убедиться, что мы правильно передаем аргумент delete todo. В компоненте Todo, замените

onClick={this.props.deleteTodo.bind(this,todoText)} 

с

function(){this.props.deleteTodo(todoText)} 

Вам не нужно связывать здесь, обернуть функцию deleteTodo так, что, когда OnClick называется функция упаковщик вызывает deleteTodo с правильным аргументом.

Когда элемент щелкнут, будет вызываться функция, назначенная для поддержки onClick, с объектом события click в качестве аргумента.Мы устанавливаем эту функцию до вызова deleteTodo с правильным аргументом, игнорируя объект события.

Answer 2

class Todo extends React.Component { 
 
     /*...*/ 
 
     handleDelete() { 
 
      this.props.deleteTodo(this.state.text); 
 
     } 
 
     /*...*/ 
 
     render() { 
 
      let priorityClass = this.switchPriority(this.state.priority); 
 
      let completedClass = this.getCompletedClass(this.state.completed); 
 
      let todoClasses = classNames(priorityClass, completedClass); 
 
      return (
 
       <tr className={todoClasses}> 
 
       <td><button ref='deleteTodo' onClick={this.handleDelete.bind(this)} className='close-button'>&times;</button></td> 
 
       <td onClick={this.handleClick} className='todo-row'>{this.state.text}</td> 
 
       </tr>); 
 
     } 
 
    } 
 
    
 
    class TodoList extends React.Component { 
 
     /*...*/ 
 
     deleteTodo(todoToRemove) { 
 
      let newTodos = this.state.todos.filter((_todo) => _todo.text !== todoToRemove); 
 
      this.setState({ 
 
       todos: newTodos 
 
      }); 
 
     } 
 
     /*...*/ 
 
    }

Не могли бы вы попробовать это? Я думаю, это потому, что вы связываете deleteTodo два раза.