componentDidUpdateは、ネットワーク要求を行うとき

Question

私のアプリは、ユーザーがそれをスワイプするたびに更新された成分を有するRCTDeviceEventEmitterエラーを与えます。
そのコンポーネントは毎回新しい小道具を取得し、その値はそれに応じて更新されます。
新しいデータを受け取ったので、私はFacebookのグラフAPIリクエストを作成して、ユーザーのプロフィール画像を取得します。
見栄えを良くするため、フェッチ要求が終了するまでデフォルト画像を追加しました。画像をデフォルトのcomponentWillReceivePropsにリセットしました。
私はエラーが発生しました： "Error calling function：RCTDeviceEventEmitter：emit"
リモートでデバッグしていない（反応したネイティブのクロムデバッガを使用している）ときのみ、これが起こります。
これは、関連するコードです：

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(); 
    }, 

は、どのように私はこのエラーを解決することができます誰でも知っていますか？なぜデバッグしないときだけですか？

Answer 1

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(); 
},