为什么我的DeleteTodos函数在我的TodoList应用中表现得如此奇怪？

Question

我试图在react上构建一个简单的todolist应用程序，但我遇到了这个问题。我可以编写将待办事项添加到状态定义的列表中并显示它所必需的代码，但是当涉及通过单击每个待办事项旁边的按钮来从列表中删除项目时，所有待办事项都会从列表中删除第一项。我该怎么办。这是代码：

TodoList（父级）组件：

import React, {Component} from 'react';
import AddTodos from './AddTodos';
import DisplayTodos from './DisplayTodos'
import "./TodoList.css";


class TodoList extends Component {
    constructor(props){
        super(props);
        this.state = {
            myList: [],
            searchField: ''
        }
        this.DeleteTodos = this.DeleteTodos.bind(this)
    }

    onSearchChange = (event) => {   
    this.setState({searchField: event.target.value})

}


    addTodo = () => {

        if(this.state.searchField !=="") {
        var newItem = {
            text: this.state.searchField,
            key: Date.now()
        }

        this.setState({myList: this.state.myList.concat(newItem)})
        this.setState({searchField: ""})
        console.log(this.state.myList)

        } else{
            alert("Please enter something")
        }

    }

    DisplayList = () => {
        const ListItems = this.state.myList.map((listitem, i) => {
            return(
                <li key={listitem.key} onClick={(i) => this.DeleteTodos(i)}>{listitem.text} <button>Delete</button>
                </li>
                )
        })

        return ListItems;
    }

    DeleteTodos = (i) => {
        i.preventDefault()
        this.setState({myList: this.state.myList.splice(i, 1)})
    }


    render() {
        return(
            <div className="TodoList">
                <AddTodos addTodo={this.addTodo} onSearchChange={this.onSearchChange}/>
                <DisplayTodos DisplayList={this.DisplayList}/>
            </div>
            )
    }
}

export default TodoList;

DisplayTodos组件：

import React, {Component} from 'react';
import AddTodos from './AddTodos';
import DisplayTodos from './DisplayTodos'
import "./TodoList.css";


class TodoList extends Component {
    constructor(props){
        super(props);
        this.state = {
            myList: [],
            searchField: ''
        }
        this.DeleteTodos = this.DeleteTodos.bind(this)
    }

    onSearchChange = (event) => {   
    this.setState({searchField: event.target.value})

}


    addTodo = () => {

        if(this.state.searchField !=="") {
        var newItem = {
            text: this.state.searchField,
            key: Date.now()
        }

        this.setState({myList: this.state.myList.concat(newItem)})
        this.setState({searchField: ""})
        console.log(this.state.myList)

        } else{
            alert("Please enter something")
        }

    }

    DisplayList = () => {
        const ListItems = this.state.myList.map((listitem, i) => {
            return(
                <li key={listitem.key} onClick={(i) => this.DeleteTodos(i)}>{listitem.text} <button>Delete</button>
                </li>
                )
        })

        return ListItems;
    }

    DeleteTodos = (i) => {
        i.preventDefault()
        this.setState({myList: this.state.myList.splice(i, 1)})
    }


    render() {
        return(
            <div className="TodoList">
                <AddTodos addTodo={this.addTodo} onSearchChange={this.onSearchChange}/>
                <DisplayTodos DisplayList={this.DisplayList}/>
            </div>
            )
    }
}

export default TodoList;

AddTodos组件

import React, {Component} from 'react';
import AddTodos from './AddTodos';
import DisplayTodos from './DisplayTodos'
import "./TodoList.css";


class TodoList extends Component {
    constructor(props){
        super(props);
        this.state = {
            myList: [],
            searchField: ''
        }
        this.DeleteTodos = this.DeleteTodos.bind(this)
    }

    onSearchChange = (event) => {   
    this.setState({searchField: event.target.value})

}


    addTodo = () => {

        if(this.state.searchField !=="") {
        var newItem = {
            text: this.state.searchField,
            key: Date.now()
        }

        this.setState({myList: this.state.myList.concat(newItem)})
        this.setState({searchField: ""})
        console.log(this.state.myList)

        } else{
            alert("Please enter something")
        }

    }

    DisplayList = () => {
        const ListItems = this.state.myList.map((listitem, i) => {
            return(
                <li key={listitem.key} onClick={(i) => this.DeleteTodos(i)}>{listitem.text} <button>Delete</button>
                </li>
                )
        })

        return ListItems;
    }

    DeleteTodos = (i) => {
        i.preventDefault()
        this.setState({myList: this.state.myList.splice(i, 1)})
    }


    render() {
        return(
            <div className="TodoList">
                <AddTodos addTodo={this.addTodo} onSearchChange={this.onSearchChange}/>
                <DisplayTodos DisplayList={this.DisplayList}/>
            </div>
            )
    }
}

export default TodoList;

Answer 1

DeleteTodos = (i) => {
    i.preventDefault();
    let arr = [].concat(this.state.myList);
    arr.splice(i, 1);
    this.setState({myList: arr});
}

splice函数将更改数组并返回一个删除项目的新数组，因此，您应该对一个变量进行十进制表示，以创建一个新数组。 您将执行的操作将更改状态。