Невозможно удалить элемент списка в React

Question

Я добавил поле ввода, которое будет печатать элементы при отправке. После этого я пытаюсь удалить элементы из списка, добавив кнопку удаления. Но кнопка не работает. Я предполагаю, что применил неправильную логику c в функции onDelete. Я использовал функцию фильтра, чтобы распечатать элементы, которые являются истинными. Я не уверен, какую ошибку я совершил здесь.

Приложение. js:

import React, { Component } from 'react'
import Result from './Result';
import Navbar from './Navbar';
import Jumbotron from 'react-bootstrap/Navbar';
import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';


export default class App extends Component {
    constructor(){
    super();
      this.state={
        addedItems:[],
        emailValue:''
      }
      this.handleChange=this.handleChange.bind(this);
      this.handleSubmit=this.handleSubmit.bind(this);
      this.onDelete=this.onDelete.bind(this);
    }

     handleChange(e){
       this.setState({
         emailValue:e.target.value
       })
     }

     handleSubmit(e){
      e.preventDefault();
      let items_copy= this.state.addedItems;
      items_copy.push(this.state.emailValue)
      console.log("item copy"+items_copy)
      this.setState({
        addedItems:items_copy,
        emailValue:''
      })
      console.log(this.state.addedItems)
     }

     onDelete(id){
      console.log("deleted clicked")
      let newArray=this.state.addedItems.filter(i=>i!==this.state.addedItems.id)
      this.setState({
        addedItems:newArray
      })
     }
  render() {
    console.log("")
    return (
     <div>
          <Navbar/>
          <Jumbotron>
          <p>
            Enter the things you would like to buy.
          </p>
        </Jumbotron>

        <Form>
          <Form.Group controlId="formBasicEmail">
            <Form.Control value={this.state.emailValue} onChange={this.handleChange}type="email" placeholder="Enter email" />
          </Form.Group>
          <Button onClick={this.handleSubmit}variant="primary" type="submit">
            Submit
          </Button>

        </Form>
        {(this.state.addedItems.length>0)?
        <Result item={this.state.addedItems} onDelete={this.onDelete} />:'empty'  }     
      </div>
    )
  }
}

Результат. js

 import React from 'react'
import ListGroup from 'react-bootstrap/ListGroup'
import Button from 'react-bootstrap/Button'

export default function Result(props) {
    const btnStyle={
        marginTop:-7,
        float:'right'
    };
    const {item,onDelete}=props;
    //let show=item.map(item=>item);
    console.log(item) 
    let itemShow = item.map((item, key,id) =>{
     return ( 
         <ListGroup.Item as="li" key={key}>{item}
         <Button onClick={()=>onDelete(id)}style={btnStyle}variant="danger">Delete</Button></ListGroup.Item>
        )})

    return (
        <div>
            <ListGroup as="ul">
                {itemShow}
            </ListGroup>
        </div>
    )
} 

Answer 1

let temp = this.state.addedItems;
temp.filter(i=>i.id!==id);
this.setState({
   addedItems: temp
});

Первым аргументом функции фильтра является текущий элемент, который, как я предполагаю, вы храните объекты, поэтому приведенный выше должен работать. Если вы хотите фильтровать по индексу, вторым аргументом для фильтрации является индекс,

.filter((item, index)=>{});

Answer 2

Просто замените эту строку в вашем методе OnDelete:

newArray=this.state.addedItems.filter(i=>i!==this.state.addedItems.id) 

By:

const index = this.state.addedItems.map(function(e) { return e.id; }).indexOf(id);
if (index > -1) {
   this.state.addedItems.splice(index, 1);
}

Должен ли быть трюк?

Согласно определению функция склейки от разработчика Mozilla.