javascript - 这两者之间有什么区别？

Question

嘿，我正在尝试删除组件内的项目。我从 antd Design 得到这张表

<div>
  <button onClick={this.createItem}>Create Item</button>
  <CSSTransition timeout={500} classNames="fade">
    <Table
      columns={[
        {
          title: "ID",
          dataIndex: "id",
          key: "id",
        },
        {
          title: "Name",
          dataIndex: "name",
          key: "name",
          render: (text) => <a>{text}</a>,
        },
        {
          title: "Action",
          key: "action",
          render: (text, record) => (
            <span>
              <a onClick={() => this.handleDelete(record.key)}>Delete</a>
              <a onClick={() => this.deleteItem(record.key)}>Delete</a>
            </span>
          ),
        },
      ]}
      dataSource={data}
    />
  </CSSTransition>
</div>;

据我所知，通常我会写这样的删除函数。

constructor(props) {
    super(props);
    this.state = {
      items: [
        { id: uuidv4(), name: "Eggs", tags: "love", key: uuidv4() },
        { id: uuidv4(), name: "Milks", tags: "love", key: uuidv4() },
        { id: uuidv4(), name: "Streak", tags: "love", key: uuidv4() },
        { id: uuidv4(), name: "Water", tags: "love", key: uuidv4() },
      ],
      data : [],
    };
    this.createItem = this.createItem.bind(this);
    this.deleteItem = this.deleteItem.bind(this);
  }

deleteItem(e) {
    // console.log(e)
    this.setState((state) => {
      items: state.items.filter((item) => item.key !== e);
    })
  }

但它不起作用。

当我像handleelete一样编写它时，该功能正在工作。

 handleDelete = key => {
    // console.log(key)
    const items = [...this.state.items];
    console.log(items)
    this.setState({
      items: items.filter(item => item.key !== key),
    });
  };

那么deleteItem和handleDelete有什么区别

标签： javascriptreactjs

Answer 1

在第一个版本中，您需要返回一个新的状态对象。

deleteItem(e) {
    // console.log(e)
    this.setState((state) => ({
      items: state.items.filter((item) => item.key !== e);
    }))
  }

将对象包装在括号中将隐式返回它。