这两个有什么区别?

我想在组件中删除一个项目,我从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有什么区别呢?

解决方案:

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

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

用括号包裹对象会隐式返回。

给TA打赏
共{{data.count}}人
人已打赏
未分类

我正在研究Java中的静态变量和实例变量,我无法理解代码的输出。

2022-9-8 16:52:39

未分类

用户输入修改结束日期的倒计时器。

2022-9-8 17:03:17

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索