Aktualisieren Sie ein Element in einem Array-Objekt im Zustand mithilfe von TextInput reagieren Native

Question

Was ich hier tun möchte, ist das Array-Objekt 'verfügbar' mit TextInput aktualisieren und darunter ist mein Code. Ich weiß nicht, warum es mir weiterhin den Token-Fehler in der _update-Funktionszeile gibt. Bitte helfen Sie. Vielen Dank!

export class Inventory extends Component { 
state = { 
    available: [ 
     {id: 0, name: 'Xb', value:5}, 
     {id: 1, name: 'Ad', value:19}, 
     {id: 2, name: 'Sc', value:1}, 
     {id: 3, name: 'AV', value:3}, 
     {id: 4, name: 'Ba', value:8}, 
     {id: 5, name: 'Ch', value:2}, 
     {id: 6, name: 'Pr', value:9}, 
     {id: 7, name: 'Mi', value:10}, 
     {id: 8, name: 'Se', value:1}, 
    ], 
} 

    _update = (text,index) => this.setState({available[index].value: text}); 

render(){ 
index = 0; 
    return(
    <View style={styles.container}> 
     <TextInput style={styles.input} 
     keyboardType = 'number-pad' 
     returnKeyType = 'go' 
     autoCapitalize = 'none' 
     maxLength = {3} 
     value = {this.state.available[index].value} 
     onChange = {(text) => _update(text,index)} /> 
    </View> 
); 
} 

Answer 1

_update = (text,index) => this.setState({available[index].value: text}); ist nicht in mehrfacher Hinsicht gültig. Zuerst nimmt setState ein Objekt, das derselbe Schlüssel und Wert sein sollte, der gerade in Ihrem Status ist, wenn Sie den Wert aktualisieren. Zweitens wird available[index].value zu nichts ausgewertet, da available nicht definiert ist. Sie können nur auf available über this.state.available zugreifen. Drittens, available[index].value wird der Schlüssel für den neuen Komponentenstatus sein, was nicht Ihr Wunsch ist, nehme ich an.

ändern Update so etwas wie dieser

_update = (text, index) => { 
    const newArray = [...this.state.available]; 
    newArray[index].value = text; 
    this.setState({ available: newArray }); 
}