TypeError: this.props.deleteItem is not a function

Question

我有 2 个组件，一个用于待办事项列表，另一个用于待办事项表单在 todo 表单组件中，我想将 deleteItem 函数从 TodoForm 组件传递到 todo 列表项组件，但是我总是收到该错误 TypeError: this.props.deleteItem is not a function

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>

TypeError: this.props.deleteItem is not a function

TypeError: this.props.deleteItem is not a function

javascript

reactjs

react-props