Реагировать на удаление по идентификатору не определено

Question

Я пытаюсь удалить элемент по идентификатору с помощью React. Мои серверные маршруты работают правильно (node ​​и postgresql). Каждый раз, когда я пытаюсь удалить элемент, он возвращается при обновлении страницы. Моя командная строка говорит, что элемент, который я пытаюсь удалить, не определен.

Если я введу определенный идентификатор (url + id), он будет работать, но не динамически. Вот пример предмета 0: {item_id: 1, item_name: "Kivik couch", item_price: 799, item_brand: "IKEA", item_category: "furniture",…}

   export default class MainContainer extends Component {
  state = {
        items: []
    }
     addItem = (item) => {
        let newItem = this.state.items
        newItem.push(item)
        this.setState({
            items: newItem
        })
    }
//Delete Item
    deleteItem = (item) => {
        let newItem = this.state.items
        newItem.splice(item, 1);
        this.setState({
            items: newItem
        })
    }

   getItems = async () => {

    try {
      const items = await fetch('http://localhost:9000/items/');
      const itemsJson = await items.json();
      this.setState({items: itemsJson});
      return itemsJson
    } catch (err) {
      console.log(err, 'error in catch block')
      return err
  }

}


   //delete
    handleDelete = (event,)=>{


    event.preventDefault();
        fetch('http://localhost:9000/items/' + this.state.items.item_id, {
            method: 'DELETE',
            headers: { 
              'Accept': 'application/json',
              'Content-Type': 'application/json' },
                body: JSON.stringify({
                "item_id": this.state.items.item_id,

            })
              })

    this.deleteItem(event.currentTarget.value)

  }

 componentDidMount(){
    this.getItems().then((data) => console.log(data,'my items'));
  } 



render(){
const itemsList = this.state.items.map((items, index)=>{
return <li className="card" key={index}><Link to={{pathname:`/item/${items.item_id}`, state:items}}>{items.item_id}. {items.item_brand} {items.item_name} ${items.item_price}</Link> <button className="tiny button" value={index} onClick={this.handleDelete}><Icon name="trash" /></button></li>
  })
    return (
         <div className="App">
         <h1>Items</h1>
         <ol className="Grid">{itemsList}</ol>
         <Forms addItem ={this.addItem} />
         </div>
      )
  }
}

Я ожидаю, что элемент будет удален во внешнем интерфейсе и бэкэнде навсегда, но вместо этого удаляемый элемент не определен, и при обновлении элемент возвращается во внешний интерфейс.

Answer 1

Измените свой дескриптор удаления, чтобы быть похожим, следующее.

handleDelete = (event) => {
  // gets the index of the clicked item from value={index}
  const index = event.target.value;
  const item = this.state.items[index];

  event.preventDefault(); 

  if (!item || !item.item_id) {
    alert("No item!");
    return;
  }

  fetch("http://localhost:9000/items/" + item.item_id, {
    method: "DELETE",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      item_id: item.item_id
    })
  });

  this.deleteItem(event.currentTarget.value);
};