有什么办法可以访问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中，您可以在需要时使用它。