有什么方法可以访问 react-native 中的对象属性数组？

debugcn 发表于 Dev

古鲁达

我是 react-native 编程的新手。我发现更困难的是访问 react-native 中的对象数组。我正在开发一个简单的 react-native 应用程序，我提出了一个 localhost 服务器请求，但在服务器响应中，我得到了对象数组。我尝试使用普通的 JavaScript 句点运算符访问这些对象数组。但是，我不允许我们访问这些对象。

我将在下图所示的对象数组中访问的属性。

在这里，我使用 localhost 服务器请求

 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 render() 函数中，我试图访问服务器响应数据中的那些对象数组。在这里，我收到以下错误，如下图所示。

请帮我找到一个解决方案来访问 react-native 中的那些对象属性数组。提前致谢...

艾伯克·阿尼尔·阿齐兹

那应该运行。您首先检查状态内是否准备好响应。如果您的响应准备就绪，您可以更改状态。检查代码。

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。