React.js сплайс удаляет неправильный элемент из списка массивов - PullRequest
0 голосов
/ 26 сентября 2018

Я хочу удалить элемент из массива, получая target.id, это приложение для корзины, иными словами, я хочу удалить элемент из корзины, когда нажимаю на значок корзины.

<span style={{fontSize:'50px'}}>Basket</span>
    <ul style={{listStyle: 'none'}}>
      {this.state.clickedNum.map((i) => <li key = 
      {this.props.gameData.id[i]} value={i}>
          {this.props.gameData.gameNames[i]} <br/>
          <img src={require('../assets/coins.png')} style={{width:'20px'}}/> 
          <strong> {this.props.gameData.prices[i]} Gil </strong>
          <img src={require('../assets/bin.png')} style={{width:'20px', justifyContent:' flex-end'}} id={this.props.gameData.id[i]}  onClick={this.removeClick}/>
          <br/>
          <hr style={{borderColor:'black'}} />
       </li>
     </ul>

Это функция onClick = {this.removeClick}:

removeClick = (e) => {
    e = e.target.id;
    let clickedNum = this.state.clickedNum;
    let isDisabled = this.state.isDisabled;
    console.log("this is i" + e);

    clickedNum.splice(e, 1);
    isDisabled.splice(e,1);


    this.setState({
        clickedNum: clickedNum,
        isDisabled:isDisabled
    })

    this.forceUpdate();

}

удаление клика связывается так в функции constructor :

    this.removeClick = this.removeClick.bind(this);

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

Также отмечу, что:

console.log("this is i" + e);

возвращает правильное значение (идентификатор кнопки, на которой оно было нажато)

1 Ответ

0 голосов
/ 26 сентября 2018

Лично мне стыдно использовать сплайсинг.Почему бы не использовать фильтр вместо этого, чтобы у вас было что-то вроде this.state.clickedNum.filter(num => num.id !== e.target.id)

removeClick = (e) => {
  id = e.target.id;
  let clickedNum = this.state.clickedNum.filter(num => num.id !==id);
  let isDisabled = this.state.filter(num => num.id !==id;


this.setState({
    clickedNum: clickedNum,
    isDisabled:isDisabled
  })
}
...