使用textInput更新數組對象的狀態數組對象React Native

我在這裏要做的是使用textInput更新數組對象'available'，下面是我的代碼。我不知道爲什麼它不斷給我在_update函數行的令牌錯誤。請幫忙。謝謝！使用textInput更新數組對象的狀態數組對象React Native

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> 
); 
}

來源

2017-07-23 Thanh Pham

_update = (text,index) => this.setState({available[index].value: text});在幾個方面無效。首先，setState需要一個對象，如果您正在更新該值，該對象應該與您現在的狀態相同。其次，available[index].value不計算任何東西，因爲available未定義。您只能通過this.state.available訪問available。第三，available[index].value將成爲新組件狀態的關鍵，這不是你所期望的我所設想的。

更改您的更新是這樣

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

來源

2017-07-23 08:15:09 hyb175

感謝您的答覆。什麼是''...'[... this.state.available]'？ –

這就是所謂的擴散算子。請查看https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator以供參考。基本上，對於數組，擴展運算符將數組中的項目放入我們正在創建的新數組中。 – hyb175

我正在嘗試相同的方法，但它說**無法修改寫事務之外的託管對象。** ...我正在努力反應本地和領域數據庫來填充該數組。 – Omer

使用textInput更新數組對象的狀態數組對象React Native

回答

相關問題