componentDidUpdate在执行网络请求时给出RCTDeviceEventEmitter错误

时间:2017-04-22 09:33:05

标签: react-native

我的应用有一个组件,每次用户滑动时都会更新 该组件每次都会获得新的道具,并且相应地更新它的值 收到新数据后,我创建了一个Facebook图形api获取请求来获取用户的个人资料图像 为了让它看起来更好,我添加了一个默认图像,直到获取请求完成。我在componentWillReceiveProps中将图片重置为默认值 我得到的错误是"错误调用函数:RCTDeviceEventEmitter:emit"
当我没有远程调试时(使用反应原生的chrome调试器),它只会开心 这是相关的代码:

  componentWillReceiveProps(nextProps){
    var temp;
    temp=this.state.profileInfo;
    temp.image='http://s3.amazonaws.com/cdn.roosterteeth.com/default/tb/user_profile_female.jpg';
    this.setState({
      profileInfo:temp,
    });
  },
  componentDidUpdate(prevProps, prevState){
    if(prevProps!=this.props){
      console.log("Updated!!!");
      var api = 'https://graph.facebook.com/' + this.props.owner_id +
                     '/picture?type=normal&access_token=' + this.props.credentials.token;
      fetch(api)
            .then((response) =>{
              var temp;
              temp=this.state.profileInfo;
              temp.image=response.url;
              this.setState({
                profileInfo:temp,
              });
            })
            .done();
    }
  },
  componentDidMount(){
    var api = 'https://graph.facebook.com/' + this.props.owner_id +
                   '/picture?type=normal&access_token=' + this.props.credentials.token;
    fetch(api)
          .then((response) =>{
            var temp;
            temp=this.state.profileInfo;
            temp.image=response.url;
            this.setState({
              profileInfo:temp,
            });
          })
          .done();
  },

有谁知道如何解决此错误?为什么只在没有调试的时候?

1 个答案:

答案 0 :(得分:0)

看看这个:github.com/facebook/react-native/issues/11764。有人用尽可能少的代码打开了同样的问题,所以这可能意味着问题不在你的React组件中。

无论如何,您可以像这样删除componentDidUpdate方法:

componentWillReceiveProps(nextProps){
  var temp;
  temp=this.state.profileInfo;
  temp.image='http://s3.amazonaws.com/cdn.roosterteeth.com/default/tb/user_profile_female.jpg';
  this.setState({
    profileInfo:temp,
  }, () => {
    if(nextProps!=this.props) {
      console.log("Updated!!!");

      var api = 'https://graph.facebook.com/' + nextProps.owner_id +
        '/picture?type=normal&access_token=' + nextProps.credentials.token;
      fetch(api)
        .then((response) => {
          var temp;
          temp = this.state.profileInfo;
          temp.image = response.url;
          this.setState({
            profileInfo: temp,
          });
        })
        .done();
    }
  });
},
componentDidMount(){
  var api = 'https://graph.facebook.com/' + this.props.owner_id +
    '/picture?type=normal&access_token=' + this.props.credentials.token;
  fetch(api)
    .then((response) =>{
      var temp;
      temp=this.state.profileInfo;
      temp.image=response.url;
      this.setState({
        profileInfo:temp,
      });
    })
    .done();
},