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

Posted 2021-04-07

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

答案

修复你的removeItem

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

Array.prototype.splice()方法修改数组到位。

回报价值

包含已删除元素的数组。如果仅删除一个元素，则返回一个元素的数组。如果未删除任何元素，则返回空数组。

另一答案

In React: mutating state directly is discouraged.

最佳做法是clone using a spread和splice()的结果。

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

另一答案

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

如果你从this.state中提取todoList并执行拼接操作，这是很好的。

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

上面的答案运作正常。但这只是一个更清洁的实现。