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

Question

I'm trying an element from an array using the id of the element yet not successful.

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>

}
)

no matter what value the user enters, only the last element is being removed. Let say the user inputs 2, the element with the id 4 is gets removed instead of 2 although it exists in the array. How should I modify to resolve the issue

Answer 1

You have a number of syntax errors in your original code, and you're not following best practices (eg if you're referencing state when using setState , use the callback because setState is asynchronous), but I think the primary issue you were having is that you're comparing strings to numbers.

I refactored your code to use more current methods (ie ES6) and added parseInt to convert the input from window.prompt into a number that can be compared to your <Input /> component's id prop. I also switched the explicit <Input /> declarations to use a numeric input, rather than a string.

Hit run and you'll see that it works as-is.

 const Input = ({ id }) => <div>{id}</div> class Foo extends React.Component { state = { arr: [ <Input id={1} />, <Input id={2} />, <Input id={3} />, <Input id={4} />, ], id: 5, } addToArray = () => { const arr = [...this.state.arr, <Input id={this.state.id} />] this.setState(prevState => ({ arr, id: prevState.id + 1 })) } removeFromArray = () => { const id = parseInt(window.prompt("Enter index")) this.setState(prevState => ({ arr: prevState.arr.filter(element => element.props.id !== id), })) } render() { return ( <div> <div> <button onClick={this.addToArray}>Add to array</button> </div> <div> <button onClick={this.removeFromArray}>Remove from array</button> </div> Array: {this.state.arr} </div> ) } } ReactDOM.render(<Foo />, document.getElementById("root"))

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>