有什麼辦法可以訪問react-native中的對象屬性數組嗎？

Question

我剛接觸反應本地編程。我發現更難的是以react-native方式訪問對象數組。我正在研究一個簡單的反應本機應用程序，我做了一個本地主機服務器請求，但在服務器響應中，我得到了對象數組。我試圖使用普通的JavaScript週期運算符訪問這些對象的數組。但是，我不允許我們訪問這些對象。

我可以在下圖所示的對象數組中訪問的屬性。

在這裏，我去與本地主機服務器請求

export default class Gallery extends Component{ 
    constructor(props){ 
    super(props); 
    this.state = { 
     data: [] 
    } 
    } 

    componentWillMount(){ 
    fetch('http://139.162.27.183:8080/Eshiksha/org/'+this.props.orgId+'/branch/'+this.props.branchId+'/videourl/videourls', { 'method' : 'GET', 
      headers: { 
      'Content-Type' : 'application/json', 
      'Authorization' : this.props.auth 
      } 
    }) 
    .then((response) => response.json()) 
    .then((responseData) => { 
     this.setState({ data: responseData }); 
     console.log(this.state.data.videoUrls[4]); // Using Remote JS Debugging i consoled out following array of object it's shown. But same code (this.state.data.videoUrls[4]) not being accessed within the render function. 
    }) 
    .done(); 
    } 

    render(){ 
     return(
     <ScrollView> 
      <View style={styles.container}> 
       <View style={styles.card}> 
        <View style={styles.button}> 
        <Text style={styles.buttonText}>{this.state.data.videoUrls[4].eventName}</Text> // Here, I'm getting error which is shown below image 
        </View> 
       <TouchableOpacity> 
        <View style={styles.button}> 
        <Image style={styles.image} source={require('./school.jpg')} /> 
        </View> 
       </TouchableOpacity> 
       </View> 
      </View> 
     </ScrollView> 
     ); 
    } 
} 

在我試圖在服務器響應數據內訪問對象的那些陣列的反應本地渲染（）函數。在這裏，我收到下圖所示的以下錯誤。

請幫我找到一個解決方案來訪問react-native中的那些對象屬性數組。在此先感謝...

Answer 1

這應該運行。你首先檢查在狀態內是否準備好了應答。 如果您的答覆已準備就緒，您可以更改狀態。檢查代碼。

 constructor(props){ 
      super(props); 
      this.state = { 
       data: [], 
       isReady:false, //create isReady on the state 
      }  

     componentWillMount(){ 
       fetch('http://139.162.27.183:8080/Eshiksha/org/'+this.props.orgId+'/branch/'+this.props.branchId+'/videourl/videourls', { 'method' : 'GET', 
         headers: { 
         'Content-Type' : 'application/json', 
         'Authorization' : this.props.auth 
         } 
       }) 
       .then((response) => response.json()) 
       .then((responseData) => { 
        this.setState({ data: responseData, isReady:true}); //when response came change the status. 
       }) 
       .done(); 
       } 

      render(){ 
       const {isReady} = this.state; //check the state if response is ready render your scrollview 
       if(isReady) 
       return(
       <ScrollView> 
        <View style={styles.container}> 
         <View style={styles.card}> 
          <View style={styles.button}> 
          <Text style={styles.buttonText}>{this.state.data.videoUrls[4].eventName}</Text> // Here, I'm getting error which is shown below image 
          </View> 
         <TouchableOpacity> 
          <View style={styles.button}> 
          <Image style={styles.image} source={require('./school.jpg')} /> 
          </View> 
         </TouchableOpacity> 
         </View> 
        </View> 
       </ScrollView> 
       ); 
       return(
        <View/> 
       ) 
      } 

Answer 2

如果你要使用它來顯示數據行，你可以做這樣的事情：

constructor(props) { 
    super(); 
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
    this.state = { 
    dataSource: ds.cloneWithRows([ 
     '' 
    ]), 
    } 
} 

...

.then((responseData) => {  
    var arrayOutput=[]; 
    arrayOutput.push(responseData); 
    this.setState({ 
     dataSource: this.state.dataSource.cloneWithRows(arrayOutput), 
    }); 
}) 

如果你只是想保存陣列做點別的事

.then((responseData) => {  
    var arrayOutput=[]; 
    arrayOutput.push(responseData); 
    this.setState({ 
     saveArray: arrayOutPut, 
    }); 
}) 

然後該數組將被保存在this.state.saveArray中，您可以在需要時使用它。