Question

我正在尝试使用该元素的ID尝试从数组中获取一个元素，但未成功。

constructor(props){
   super(props)
   this.state = {

     arr : [<Input id="1" />,<Input id="2" />,<Input id="3" />,<Input id="4" />],
     id: 5 

   }
 }

   addToArray(){
    let id = this.state.id
    let arr = this.state.arr
    let tmp = <Input id={id} />
    id = id + 1
    arr.push(tmp)
    this.setState({arr,id})

  }


   removeFromArray(){

     let idx = prompt("Enter index")

     let data = [...this.state.arr]
     let arr_two = []

      arr_two = data.filter(function( element ) {
           return (element.props.id !== idx );
        }); 

      this.setState({arr: arr_two})


}

render(

   return(){

    <Button onClick={() => {this. addToArray()}}>add to array</Button>
   <Button onClick={() => {this.removeFromArray()}}>remove from array</Button>

}
)

无论用户输入什么值，都只会删除最后一个元素。假设用户输入2，则ID为4的元素将被删除，而不是2，尽管它存在于数组中。我应该如何修改以解决该问题

Answer 1

您的原始代码中存在许多语法错误，并且您没有遵循最佳做法（例如，如果在使用state时引用setState，请使用回调，因为{{1 }}是异步的），但我认为您遇到的主要问题是将字符串与数字进行比较。

我重构了您的代码以使用更多当前方法（例如ES6），并添加了setState，将输入从parseInt转换为window.prompt，可以与您的{{1} }组件的number道具。我还切换了显式<Input />声明以使用数字输入而不是字符串。

运行，您将看到它按原样工作。

id

<Input />

从数组中删除元素不起作用

1 个答案: