Question

我有一个包含各种组件的状态数组。当我单击其中一个组件上的删除按钮时，它将从数组中删除第一项。我似乎只在数组中使用组件时才遇到此问题，它在字符串数组中正常工作。

父组件：

addItem = (block) => {
  const add = [...this.state.items, block];
  this.setState({items: add})
}

removeItem = (index) => {
  const remove = [...this.state.items];
  remove.splice(index, 1);
  this.setState({items: remove})
}

render(){
  return(
    <div className="Board">
      <div className="BoardContainer">
        {this.state.items.map((item, index) => { return <Item remove= {this.removeItem} key={index} >{item}</Item>})}
      </div>
      <button onClick={() => this.addItem(<BannerImage />)}>Banner Image</button>
      <button onClick={() => this.addItem(<ShortTextCentered />)}>Short Text Centered</button>
    </div>
  )
}

子组件：

export class Item extends React.Component {

  handleRemove = () => {
    this.props.remove(this.props.index)
  }

  render() {
    return (
      <div className="item">
        {this.props.children}
        <button onClick={this.handleRemove} >Remove</button>
      </div>
    )
  }
}

Answer 1

您在组件“ this.props.index”内部使用过，但没有将索引传递给组件。

您应该执行以下操作：

{this.state.items.map((item, index) => { return <Item remove={this.removeItem} key={index} index={index} >{item}</Item>})}

Answer 2

Array.prototype.splice（）对数组进行突变，因此最好不要在React中使用splice（）。

最容易使用Array.prototype.filter（）创建一个新数组。

此外，使用唯一ID而不是索引可以防止出现意外结果。

let filteredArray = this.state.item.filter(x=> x!== e.target.value)
this.setState({item: filteredArray});

从状态数组中删除项目时的奇怪行为

2 个答案: