Splice() borra el mal elemento de la matriz

Mi problema es cuando estoy eliminar las entradas que añadir dinámicamente es eliminar el mal de entrada. Hice mi código en jsfiddle https://jsfiddle.net/armakarma/qwg3j2fa/24/ . Intente agregar más de cinco entradas, escriba algo en cada entrada y tratar de eliminar la segunda entrada. Se elimina la última. Donde estoy realizando error?

addNewInputs() {

    let newInputValues = {
        datetime: "10.05.2019 14:00",
        position_id: 1,
        contact: "",
        address_id: "",
        new_address: "",

    }
    this.setState(prevState => ({
        arrayOfAddresses: [...prevState.arrayOfAddresses, newInputValues],
    }))
}

deleteInput(idx) {

    let tempObj = this.state.arrayOfAddresses

    tempObj.splice(idx, 1)
    this.setState(prevState => ({
        arrayOfAddresses: tempObj,
    }))

}

onChooseAddress(e, idx) {
    console.log(e.target.value)

}

render() {

    return ( <
        div > {
            this.state.arrayOfAddresses.map((item, idx) => {
                return (
                    <div key = {idx} >
                      <input name = "contact"
                      onChange = {(e) => this.onChooseAddress(e)}
                    /> 
                      <button onClick = {() => this.deleteInput(idx)} > x < /button> 
                    </div>
                )
            })
        } 
          <button onClick = {() => this.addNewInputs()} > Add new input < /button> 
        /div>
    )
}
}

1 Respuestas

  • Jean-Pierre
    4 de mayo de 2019

    Está modificando su estructura de datos, mientras que la iteración a través de ella. El uso de una copia de los datos, mientras que la iteración o modificar una copia de los datos.