Reactjs没有正确呈现我的状态

Reactjs is not rendering my state properly

本文关键字：我的 状态 Reactjs      更新时间：2023-09-26

这是我用ReactJS制作的todo应用程序。我无法正确删除待办事项

它总是删除最后一个待办事项，无论我点击哪个。

示例:如果我点击删除"买袜子"，它将删除"Oi them"。如果我尝试在调试器中检查列表状态，它会删除正确的ToDo。

我把代码上传到GitHub仓库，它是用create-react-app安装的，应该很容易安装。

根据我的理解，我在TodoList状态下删除的todo条目不会删除被删除的子条目的状态，因此它不会停止存在。

我怎么照顾它?我做错了什么?

提示:这里是一个删除了不必要代码的要点

现在您的deleteTodo函数绑定了错误的this。deleteTodo函数想要设置父组件的状态，调用this.setState()。然而，this是在子类的构造函数中绑定的。您需要在父组件的构造函数中绑定this和deleteTodo: TodoList。

这样，当函数被调用时，它将正确地设置TodoList的状态与新的，过滤的待办事项列表。

所以更具体地说明你所发布的代码中需要的更改。

首先在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道具的函数将被调用，点击事件对象作为参数。我们将这个函数设置为使用正确的参数调用deleteTodo，忽略事件对象。

    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。

相关文章：