react-nativeのオブジェクトプロパティの配列にアクセスする方法はありますか？

Question

私は反応ネイティブプログラミングには初めてです。私がより難しいと感じるのは、反応ネイティブでオブジェクトの配列にアクセスすることです。私は単純な反応ネイティブのアプリケーションで作業している、私はローカルホストのサーバー要求をしたが、サーバーの応答では、私はオブジェクトの配列を取得しています。私は通常の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> 
     ); 
    } 
} 

で行きます。ここでは、次のようなエラーが表示されます。

反応ネイティブのオブジェクトプロパティの配列にアクセスするための解決策を見つけるのを手伝ってください。事前のおかげで...実行する必要があります

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に保存され、必要なときに使用できます。