Javascript 组件阵列筛选器存在问题

我想创建多个组件，并通过单击按钮删除它们。我创建了组件。但我不能删除它

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

}

addCard() {
    var action = this.state.todoCard.concat(<TodoCard deleteCard={() => this.deleteCard(this.state.id)}
                                                      key={this.state.todoCard.length}/>);
    this.setState({id: Math.random() + 1, todoCard: [...action]})
}

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

---

根据我对您的问题的理解，以及您显示的代码部分。您正试图从状态为todoCard的卡列表中删除一张“卡”

您的

todoCards

数组包含组件，您无法以尝试的方式与这些附加组件交互，因为它们没有您尝试用于

筛选的
id
等属性

我的建议是将创建
TodoCard
组件所需的数据存储为
对象
或
Number
值，而不是存储在
TodoCard
数组中。然后，您可以更轻松地基于该数据进行过滤。转到“渲染”时，可以将数据映射到组件中，如下所示：

import React from "react";


class TodoCard extends React.Component {
    render() {
        return (<div onClick={this.props.deleteCard}>{this.props.value}</div>);
    }
}

class App extends React.Component {

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

    addCard() {
        this.setState({
            id: Math.random() + 1,
            todoCard: [...this.state.todoCard, this.state.id]
        })
    }

    deleteCard(id) {
        this.setState({
            todoCard: this.state.todoCard.filter(item => item !== id)
        });
    }

    render() {
        return (
            <div className="App">
                <button onClick={() => this.addCard()}>Add</button>
                {this.state.todoCard.map((e, i) => (
                    <TodoCard deleteCard={() => this.deleteCard(e)}
                              key={i}
                              value={e}/>
                ))}
            </div>
        );

    }
}

export default App;

你能发布函数“setState（）”的代码吗？我想我们这里没有足够的代码，但请尝试将其调整到你的文件中：@thatguytyler正如标记中所说，这是一个项目，因此是一个已知的操作。
import React from "react";


class TodoCard extends React.Component {
    render() {
        return (<div onClick={this.props.deleteCard}>{this.props.value}</div>);
    }
}

class App extends React.Component {

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

    addCard() {
        this.setState({
            id: Math.random() + 1,
            todoCard: [...this.state.todoCard, this.state.id]
        })
    }

    deleteCard(id) {
        this.setState({
            todoCard: this.state.todoCard.filter(item => item !== id)
        });
    }

    render() {
        return (
            <div className="App">
                <button onClick={() => this.addCard()}>Add</button>
                {this.state.todoCard.map((e, i) => (
                    <TodoCard deleteCard={() => this.deleteCard(e)}
                              key={i}
                              value={e}/>
                ))}
            </div>
        );

    }
}

export default App;