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函数将更改数组并返回一个已删除项目的新数组，因此您应声明一个变量以复制myList，然后更改该变量。 您所做的将更改状态。

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

1 个答案: