TypeError: this.props.deleteItem不是一个函数

Question

我有两个组件，一个用于todo项目列表，另一个用于todo表单在todo表单组件中，我想将deleteItem函数从TodoForm组件传递到todo列表项组件，但是我总是得到错误TypeError: this.props.deleteItem不是一个函数

class Todo extends Component {
constructor(props) {
super(props);
this.state = {
todoList: [],
newItem: "",
newDescription: "",
chkbox: false,
};
}
deleteItem = (id) => {
const todoList = this.state.todoList.filter(function (item) {
return item.id !== id;
});
this.setState({ todoList });
};
render() {
return (
<div className="Todo">
<form id="to-do-form" onSubmit={this.addItem}>
.....
<button type="submit">Add</button>
</form>
<ListItems
items={this.state.todoList}
deleteItem={this.state.deleteItem}
></ListItems>
</div>
);
}
}
export default Todo;

在待办事项列表项组件中，我使用this.props.deleteItem

class ListItems extends Component {
render() {
const list_items = this.props.items;
return (
<div>
<ul>
{list_items.map((item) => {
return (
<li className="list-item" key={item.id}>
....
<button
onClick={() => {
if (
window.confirm(
"Are you sure you wish to delete this item?"
)
)
this.props.deleteItem(item.id);
}}
>
<i className="material-icons">x</i>
</button>
</li>
);
})}
</ul>
</div>
);
}
}
export default ListItems;

Answer 1

deleteItem不属于状态。只需像这样更新传递给ListItems的道具:

<ListItems
items={this.state.todoList}
deleteItem={this.deleteItem}
></ListItems>