Splice() löscht falsche element in array

Mein problem ist, wenn ich das löschen von Eingaben, die dynamisch Hinzugefügt es löschen Sie die falsche Eingabe. Ich reproduzierte mein code in jsfiddle https://jsfiddle.net/armakarma/qwg3j2fa/24/ . Versuchen Sie, fügen Sie fünf weitere Eingänge, Typ etwas in jeder Eingabe und versuchen Sie zu löschen, zweiten Eingang. Löschen Letzte. Wo mache ich Fehler???

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 Antworten

  • Jean-Pierre
    4. Mai 2019

    Sie ändern Ihre Daten-Struktur während der Iteration durch. Verwenden Sie eine Kopie der Daten während der Iteration ändern oder eine Kopie der Daten.