javascript - 添加和删​​除类数组错误

Question

下面是我尝试创建一个类数组。接下来是应用程序的功能:可以添加或删除额外的输入框并增加或减少其值。结果，该应用程序显示了所有存在标签的总和。问题来自 Delete 函数，当从创建的列表中删除任何组件时，它会更正数组中的数学但错误地重新呈现元素。它总是删除列表中的最后一个组件，即使您尝试删除任何其他组件也是如此。任何提示为什么会发生？谢谢

class Trade1 extends React.Component {
  state = {
    vl: this.props.value
  }
  change = (v) => {
    let newValue
    if (v) {
      newValue = this.state.vl + 1
    } else {
      newValue = this.state.vl - 1
    }
    this.setState({vl: newValue})
    this.props.onChange(newValue, this.props.index)
  }

  render() {
    const {value, index} = this.props
    return (
      <div>
      <button onClick={() => this.change(false)}>Down</button>
      <input class="v_price" value={`${this.state.vl}`}/>
      <button onClick={() => this.change(true)}>Up</button>
      <button onClick={() => this.props.delete(this.props.index)}>Delete</button>
      </div>
    )
  }
}

class Parent  extends React.Component {
  constructor(props){
  super(props);
  this.state = {
    arr: [0,0,0]
  }
 }

  onChange = (v, i) => {
    let newArr = this.state.arr
    newArr[i] = v
    this.setState(newArr)
  }

  plus = () => {
    let a = this.state.arr
    a.push(0)
    this.setState({arr: a})
  }

  minus = i => {
    let a = this.state.arr
    a.splice(i, 1)
    console.log(a)
    this.setState({arr: a})

  }

  render() {
    return (
      <div>
      {this.state.arr.map((v, i) =>
        {
            return <Trade1 value={v} index={i} onChange={this.onChange} delete={this.minus}/>
        }
      )}
      <div>{
        this.state.arr.reduce((a, b) => a+b, 0 )
      }</div>
      <div><button onClick={this.plus}>Plus</button></div>
      </div>
    )
  }
}



ReactDOM.render(<Parent />, document.getElementById('root'));

Answer 1

你正在改变数组，你应该使用过滤器并删除你作为参数传递的索引处的元素

  minus = i => {
    this.setState({
      arr: this.state.arr.filter((x, j) => j !== i)
    })
  }