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

Question

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

TodoList(parent) 组件：

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;

添加待办事项组件

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;

标签： javascriptreactjs

Answer 1

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

该splice函数将更改数组并返回一个新的已删除项目数组，因此您应该声明一个要复制的变量myList，并更改该变量。你所做的将改变状态。