Внедрение Reactjs CRUD-приложения без уникального идентификатора для предметов - PullRequest
Новая
       1

Внедрение Reactjs CRUD-приложения без уникального идентификатора для предметов

0 голосов
/ 10 января 2020

Я создаю приложение CRUD, используя Reactjs, но мне трудно реализовать функцию DELETE . Я использовал key={item + 1} для генерации уникального идентификатора для каждого сохраненного элемента в массиве, но я не знаю, как его оценить. Вот мой код ... СПИСОК 

<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: [],
};

1 Ответ

1 голос
/ 10 января 2020

Вы можете передать некоторую информацию для удаления. 

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>

Обновление. Игнорируя идентификатор, вы можете использовать ключ => индекс 

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>
...