Javascript 如何删除react中包含内容的div卡？

我的问题就像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>

{this.state.todoCard.map（（e，i）=>(
这个.deleteCard（e）}
key={i}
值={e}/>
))}

我会像那样生成添加的卡片

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>

        )
    }
}

类TodoCard扩展组件{
状态={
新项目：“，
名单：[]
}
手变（活动）{
this.setState（{newItem:event.target.value}）
}
附加项（事件）{
event.preventDefault（）；
常量newItem={
id:1+数学.random（），
值：this.state.newItem.slice（），
勾选：假
};
//如果有其他原因，请输入kontrol etmek için kullandım
如果（newItem.value==“”）{
警报（“Boşbilgi Giremeznizing”）
}
否则{
const list=[…this.state.list]；
list.push（newItem）；
这是我的国家({
列表
新项目：“
})
}
}
删除项目（id）{
const list=[…this.state.list]；
const updatedList=list.filter（item=>item.id！==id）；
this.setState（{list:updatedList}）；
}
检查项目（id）{
这是我的国家({
list:this.state.list.map（项=>{
如果（item.id==id）{
返回{
…项目，
选中：！item.checked
}
}
否则{
退货项目；
}
})
})
}
render（）{
返回(

Sil
{this.props.value}


{this.state.list.map（项=>{
返回(

this.checkItem（item.id）}className=“checkbox”type=“checkbox”/
{item.value}
this.deleteItem（item.id）}>X

)
})}

)
}
}

---

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

当您更新状态时，不应调用该状态，而应将上一个状态作为输入

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

---

您似乎从未增加过state.id。检查您没有在多个对象上复制id。有更实用的方法生成唯一IDalso@charlietfl我用“Math.random（）+1”创建了id，但同样的错误也发生了。删除第一张卡时，第二张卡的列表将消失。