從對象數組插入數據到陣列React Native

Question

我想獲取用戶輸入，從userInput創建一個對象數組，並將該數組對象保存到數組中。下面是我寫的代碼，但沒有輸出。

import React, { Component } from 'react'; 
import {Text, View, StyleSheet, TextInput, Image, TouchableOpacity, ListView} from 'react-native'; 
//import {Actions} from 'react-native-router-flux'; 

const count = 0; 

export default class SecondPage extends Component { 
constructor(props) { 
    super(props); 
    this.state = { 
     quan:'', 
     desc:'', 
     amt:'', 
     dataStorage :[], 
     data: { quantity: this.quan, description: this.desc, amount: this.amt }, 
    } 
    } 

_add(){ 
    console.log('Add button pressed'); 
    this.state.dataStorage[count].push(this.state.data); 
    console.log(this.state.data); 
    count++; 
} 
render(){ 
return(
<View style={styles.container}> 
      <View style={styles.itemDescription}> 
       <Text style={styles.itemDescriptionText}>QUANTITY</Text> 
       <Text style={styles.itemDescriptionText}>DESCRIPTION</Text> 
       <Text style={styles.itemDescriptionText}>AMOUNT</Text> 
       <TouchableOpacity style={styles.addButton} onPress={this._add}> 
       <Text style={styles.addButtonText}>ADD</Text> 
       </TouchableOpacity> 
      </View> 
      <View style={styles.rowsOfInput}> 
       <TextInput style = {styles.nameInput} 
         onChangeText={(text) => this.setState({quan: text})} 
         value = {this.state.quan} 
         autoCapitalize='none' 
         autoCorrect={false} 
         returnKeyType="next" 
         keyboardAppearance="dark" 
       /> 
       <TextInput style = {styles.nameInput} 
         onChangeText={(text) => this.setState({desc: text})} 
         value = {this.state.desc} 
         autoCapitalize='none' 
         autoCorrect={false} 
         returnKeyType="next" 
         keyboardAppearance="dark" 
       /> 
       <TextInput style = {styles.nameInput} 
         onChangeText= {(text) => this.setState({amt: text})} 
         value = {this.state.amt} 
         autoCapitalize='none' 
         autoCorrect={false} 
         returnKeyType="next" 
         keyboardAppearance="dark" 
       /> 

      </View>  
</View> 

)} 
} 


const styles = StyleSheet.create({ 
    container: { 
    flexDirection: 'column', 
    }, 
    itemDescription: { 
     marginTop:20, 
     backgroundColor:'#00CED1', 
     flexDirection:'row', 
     justifyContent:'space-between', 

    }, 

    itemDescriptionText:{ 
     fontSize:12, 
     color:'white', 
    }, 

    addButton:{ 
    borderWidth:1, 
    height:20, 
    borderRadius:5, 
    overflow:'hidden', 
    backgroundColor:'red', 

    }, 
    addButtonText:{ 
    paddingLeft:10, 
    paddingRight:10, 

    }, 
    nameInput:{ 
    flex:1, 
    height: 20, 
    textAlignVertical:'bottom', 
    paddingLeft: 5, 
    paddingRight: 5, 
    fontSize: 12, 
    backgroundColor:'#E0FFFF', 
    }, 
    hairLine:{ 
    height:1, 
    backgroundColor:'black', 
    marginTop:0, 
    marginLeft:20, 
    marginRight:20 
    }, 
    rowsOfInput:{ 
    // flex:1, 
     flexDirection:'row', 
     justifyContent:'space-around' 
    }, 
}); 

代碼有什麼問題？我想將每個條目的userInput存儲爲QUANTITY，DESCRIPTION，AMOUNT作爲對象數組。

Answer 1

你的問題之一是一個範圍界定問題。將您的_add方法更改爲此。

_add =() => { 
    let dataStorage = [{amt: this.state.amt, quan: this.state.quan, desc: this.state.desc}, ...this.state.dataStorage] 
    console.log(dataStorage) 
    this.setState({dataStorage}) 
} 

此外，您data財產上state永遠不會工作，是不必要的。

這裏是一個example。

它仍然不會顯示任何東西，因爲你什麼也沒做，dataStorage。