实现没有项目唯一 ID 的 Reactjs CRUD 应用程序

Question

我正在使用 Reactjs 创建一个 CRUD 应用程序，但我很难实现 DELETE 功能。我使用 key={item + 1} 为数组中的每个存储项生成唯一 ID，但我真的不知道如何评估它。这是我的代码... 列表

<ul>
  {this.state.items.map(item => (
    <li key={item + 1}>
      {item}
      <button>edit</button>
      <button onClick={this.handleDelete}>delete</button>
    </li>
  ))}
</ul>;

删除函数

handleDelete(id) {
    let items = this.state.items;
    this.setState({
      items: this.state.items.filter(item => items.id !== id),
    });
}

状态

this.state = {
  input: '',
  items: [],
};

Answer 1

您可以将一些信息传递给 handleDelete

handleDelete(id){
    let items = this.state.items.filter(item => items.id !== id);
        this.setState({
            items: items
        });
}


<ul>
        {
            this.state.items.map(item => ( 
            <li key={item.id}>
            {item}
            <button>edit</button>
 {/* here I send id of current item */}
            <button onClick={()=>this.handleDelete(item.id)}>delete</button>
            </li>
        ))}
</ul>

更新。忽略 id 你可以使用 key => index

handleDelete(key){
    let items = this.state.items.filter((item, mapKey) => key !== mapKey);
        this.setState({
            items: items
        });
}


<ul>
        {
            this.state.items.map((item, key) => ( 
            <li key={key}>
            {item}
            <button>edit</button>
 {/* here I send id of current item */}
            <button onClick={()=>this.handleDelete(key)}>delete</button>
            </li>
        ))}
</ul>

实现没有项目唯一 ID 的 Reactjs CRUD 应用程序

Implement Reactjs CRUD Application without unique ID for items

crud

reactjs