如何使用 React 删除待办事项列表中的项目答案

【问题标题】：how to remove item in todo list using React如何使用 React 删除待办事项列表中的项目
【发布时间】：2018-06-02 19:55:05
【问题描述】：

我正在使用 React 创建一个待办事项列表应用程序，在我的应用程序中，当我单击 x 按钮删除一个项目并使用 console.log 检查当前数组时，我可以看到数组已正确更新为我想要的项目从数组列表中删除删除，但 Dom 只呈现我要删除的项目而不是整个数组

import React from 'react';
import ReactDom from 'react-dom';

class TodoList extends React.Component{
    constructor(props){
        super(props);
        this.state={
            todoList:[],
            todo:''
        }
    };

    onValueChange=(e)=>{
        const todo=e.target.value;
        this.setState({todo})
    };

    removeItem=(props)=>{
        this.setState({todoList:this.state.todoList.splice(props,1)})
        console.log(this.state.todoList)
    };

    onSubmit=(e)=>{
        e.preventDefault();
        const {todoList,todo}=this.state
        this.setState({todoList:[...todoList,todo]})
        this.setState({todo:''})
        console.log(this.state.todoList)
    };

    render(){
        const myList=this.state.todoList.map((todo,index)=>(
            <li key={index}>
                {todo}
                <button onClick={()=>this.removeItem(index)}>x</button>
            </li>
        ))
        return (
            <div>
                <form onSubmit={this.onSubmit}>
                    <input 
                        type="text"
                        value={this.state.todo}
                        onChange={this.onValueChange}
                        autoFocus
                        placeholder='todo'
                    />
                </form>
                <ol>
                    {myList}
                </ol>
            </div>
        )
    };
};

ReactDom.render(<TodoList/>,document.getElementById('app'));

这是图片

在图片中，您可以看到控制台显示的数组已删除了项目“5”，但屏幕仅显示项目“5”而不是项目 1 到 4

【问题讨论】：

查看stackoverflow.com/questions/43893508/…
splice 返回删除的项目。先拼接后赋值
不要用 console.log 检查数组！ setState 是异步方法，您无法在 setState 之后立即看到状态突变。您可以使用 setTimeout(() => console.log(this.state)) 之类的方法或在 componentDidUpdate 函数中打印状态。

标签： javascript arrays reactjs key

【解决方案1】：

In React: mutating state directly is discouraged.

最佳实践是clone using a spread 和splice() 结果。

removeItem = (index) => {
  return this.setState({todoList: [...this.state.todoList].splice(index, 1)})
}

【讨论】：

【解决方案2】：

修复你的removeItem

removeItem = (props)=> {
    this.state.todoList.splice(props, 1)
    this.setState({todoList: this.state.todoList})
    console.log(this.state.todoList)
};

Array.prototype.splice()方法就地修改数组。

返回值

包含已删除元素的数组。如果只有一个元素删除，返回一个元素的数组。如果没有元素删除后，返回一个空数组。

【讨论】：

【解决方案3】：

Splice 函数不会返回最终的数组，而是对正在执行操作的数组进行变异。

如果从this.state中提取todoList并进行拼接操作就好了。

removeItem=(props)=>{
    const { todoList } = this.state;
    todoList.splice(props, 1);
    this.setState({
        todoList,
    });
    console.log(this.state.todoList)
};

上面的答案很好用。但这只是一个更简洁的实现。

【讨论】：