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

我正在使用 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

在 React 中：变异state直接被劝阻。

最佳实践是clone用一个spread and splice()结果。

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