Question

我想从获取target.id的数组中删除一个项目，此应用程序用于购物车，换句话说，当我单击bin图标时，我想从购物车中删除项目。

<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();

}

删除点击在构造函数函数中的绑定方式如下：

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

问题来了，如果当购物车中有多个项目时单击垃圾箱，它不会删除第一个元素，并且也不会总是删除正确的项目，但是，如果购物车中只有一个项目它将删除正确的一个。

我还注意到：

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

返回正确的值（单击该按钮的按钮的ID）

Answer 1

我个人觉得使用接头很麻烦。为什么不使用过滤器，所以您会得到类似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
  })
}

React.js拼接从数组列表中删除错误的项目

1 个答案: