当前位置:  开发笔记 > 编程语言 > 正文

在渲染时,获取未定义不是React native中的对象

如何解决《在渲染时,获取未定义不是Reactnative中的对象》经验,为你挑选了2个好方法。



1> Brandon..:

你有两个问题.

首先,你要通过道具RenderPhotos就是this.props.photos,这是不确定的AwesomeProject.查看render()函数RenderPhotos,您尝试访问索引0处的元素,该元素this.props.photos未定义.这可能是导致你的错误的原因.我怀疑你的意思是设置照片道具等于组件this.state.photosrender()功能AwesomeProject.

其次,里面componentWillMount()的的AwesomeProject成分,可以使国家二级更改后您从API得到的照片:

this.setState({
  isLoading: false
});

this.setState({
  photos: JSON.stringify(responseData)
});

可能但不能保证React可以批量处理这两个setState()调用,因此两个状态属性将同时设置,并且该render()方法只会被调用一次.但是,如果这些setState()函数是同步执行的,则render()this.state.loading === false和时将调用该函数this.state.photos === undefined.该RenderPhotos组件将安装件和接收支柱photos={this.state.photos}(使我上述变更后).不幸的是,因为this.state.photos未定义,当您尝试访问函数this.props.photos[0]内部时,您将遇到与上述相同的问题.这是我的建议来解决你的问题:render()RenderPhotos

var AwesomeProject = React.createClass({
    getInitialState: function() {
      return {
        isLoading: true,
        photos: this.props.photos
      };
    },
    componentWillMount: function(){
      fetch("http://localhost:3000/api/photos/", {
          method: "GET", 
          headers: {
            "x-access-token":"xxxxx",
            "x-key":"xxxx"
          },
        })
        .then((response) => response.json())
        .then((responseData) => {
            AlertIOS.alert(
                "GET Response",
                "Search Query -> " + JSON.stringify(responseData)
            )
            // Set both state properties at the same time to avoid passing an undefined value as a prop to RenderPhotos
            this.setState({
              isLoading: false,
              photos: JSON.stringify(responseData)
            });
        })
        .done();
    },
    render: function() {
        if(this.state.isLoading){
          return Loading...
       }
       // RenderPhotos should receive this.state.photos as a prop, not this.props.photos
        return (
            
        );
    },

});

var RenderPhotos = React.createClass({
  getInitialState: function() {
      return {
        photos: this.props.photos
      };
  },
  render: function(){
    var photos = Photos;
    return (
      
         {this.props.photos[0]} 
      
    )
  }
});



2> illusionist..:

对于那些无法在上述答案中找到解决问题的方法的人:

这解决了我的问题:我更改了代码

import {React} from 'react';

import React from 'react';

推荐阅读
拾味湖
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有