如何在反应中删除 div 卡及其内容？

Question

我的问题就像在 gif 照片中一样。当我删除第一张卡片时，下一张卡片的内容将被删除。我怎样才能防止这种情况发生。

state = {
        data: '',
        todoCard: [],
        id: 0,

    }
    addCard() {

        this.setState({ id: this.state.id + 1, todoCard: [...this.state.todoCard, this.state.id] })
    }
    deleteCard(id) {
        this.setState({
            todoCard: this.state.todoCard.filter(item => item !== id)
        });
    }

我用这些函数添加和删除div卡。

 <div className="pageContainer">
                    <CreateCard onClick={this.addCard.bind(this)} />
                    {this.state.todoCard.map((e, i) => (
                        <TodoCard deleteCard={() => this.deleteCard(e)}
                            key={i}
                            value={e} />
                    ))}
                </div>

我像这样生成添加的卡片。

class TodoCard extends Component {
    state = {
        newItem: "",
        list: []
    }
    handleChange(event) {
        this.setState({ newItem: event.target.value })
    }
    addItem(event) {
        event.preventDefault();
        const newItem = {
            id: 1 + Math.random(),
            value: this.state.newItem.slice(),
            checked: false
        };
        //Inputu kontrol etmek için if-else kullandım
        if (newItem.value === "") {
            alert("Boş bilgi giremezsiniz")
        }
        else {
            const list = [...this.state.list];
            list.push(newItem);
            this.setState({
                list,
                newItem: ""
            })
        }

    }

    deleteItem(id) {

        const list = [...this.state.list];
        const updatedList = list.filter(item => item.id !== id);
        this.setState({ list: updatedList });


    }
    checkItem(id) {
        this.setState({
            list: this.state.list.map(item => {
                if (item.id === id) {
                    return {
                        ...item,
                        checked: !item.checked
                    }
                }
                else {
                    return item;
                }
            })
        })

    }
    render() {
        return (
            <div className="card">
                <TodoForm onChange={this.handleChange.bind(this)} value={this.state.newItem} submit={this.addItem.bind(this)} />
                <hr />
                <button onClick={this.props.deleteCard}>Sil</button>
                <p>{this.props.value}</p>
                <ul>
                    {this.state.list.map(item => {
                        return (
                            <li className="list" key={item.id}>
                                <input onClick={() => this.checkItem(item.id)} className="checkbox" type="checkbox" />
                                <label style={{ textDecoration: item.checked ? "line-through" : "" }}>{item.value}</label>
                                <button className="deleteButton" onClick={() => this.deleteItem(item.id)}>X</button>
                            </li>
                        )
                    })}

                </ul>
            </div>

        )
    }
}

卡片内容就是这样。当我删除最后一张卡时，它可以工作。但是当我删除第一张卡片时，下一张卡片的内容也会被删除。

Answer 1

更新状态时，不应该调用状态，而是将之前的状态作为输入

 this.setState(previousState => {
      return {
        count: previousState.count + 1
      }
    });