コンポーネントのライフサイクルでの問題/未定義の処理ができません

Question

特定の時点でタイトル、説明、ユーザー情報の情報フィードを取得する予定のアプリを作成しています。私はこれを反応ネイティブでやっています。これらは同じビュー内の2つの別々のフィードであり、2つのタブを切り替えることができるので、私は現在のアーキテクチャーがその後最適であると考えました。 Methods.jsから

：

当面の問題は

exports.getFriendFeed = function(TOKEN) { 
    return new Promise((resolve, reject) => { 
     fetch(baseUrl + 'feed' , { 
     method: 'GET', 
     headers: { 
     'Accept': 'application/json', 
     'Content-Type': 'application/json', 
     'Token' : TOKEN, 
     }, 
    }) 
    .then((response) => response.text()) 
    .then((responseText) => { 

     resolve(responseText); 
    }) 
    .catch((error) => { 
     reject(error); 
    }); 
    }); 
}; 

私はフェッチ要求をし、私のhome.js画面に送信書きます。

var Home = React.createClass({ 
. 
. 
. 
    changeComponent: function(component) { 
    Method.getFriendFeed(this.state.tokenSupreme) 
    .then((res) => this.setState({ 
     friendFeed: JSON.parse(res).friendPosts, 
     loaded: true, 
    })) 
    .catch((error) => console.log(error)) 
    .done();  
    this.setState({ 
     componentSelected: component, 
    }) 
    }, 

特定のフィードビューを押すと、そのビューのコンテンツが具体的に読み込まれることを意味します。

コンポーネントをレンダリングし、情報フィードのと、それがロードされるかどうか小道具を渡す：

renderComponent: function(component) { 
     if(component === 'One') { 
     return <ComponentOne 
     friendData={ 
      this.state.friendFeed 
     } 
     loaded={ 
      this.state.loaded 
     } /> 
     } else if(component === 'Two') { 
     return <ComponentTwo /> 
     } 
    }, 

しかし今、本当の問題が来ます。 React Nativeによって提供されたドキュメントに従います。私はconsole.logを持っていて、 "loading"を生成したrowDataを返し、それから、私が望むjson形式のデータを返します。つまり、これは最初にchangeComponentの機能を正常に通過して「読み込み」になり、間違ってがtrueになることを意味しますが、この実行中に特定のキーや名前を呼び出すことはできません私のjsonは、それがただ「種類の」ロードされているという事実のために、定義されていないだけ戻って、すぐにアプリケーションを赤くスクリーンします。

var ComponentOne = React.createClass({ 
    getInitialState: function() { 
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
    return { 
     dataSource: ds.cloneWithRows(this.props.friendData), 
    }; 
    }, 

    render: function() { 
    if (!this.props.loaded) { 
     return this.renderLoadingView(); 
    } else { 
    return (
     <ListView 
      dataSource={this.state.dataSource} 
      renderRow={this.renderRow} 
      style={styles.card} /> 
    ) 
    } 
    }, 
    renderLoadingView: function() { 
    return ( 
     <View style={{alignItems: 'center', alignSelf: 'center', marginTop: 150, justifyContent: 'center'}} > 
     <Text style={{fontSize: 30, fontWeight: '400', color: '#666'}}> Loading ... </Text> 
     </View> 
    ); 
    }, 

    renderRow: function(rowData) { 
    return (
     <CardView 
      name={rowData.name} 
      fullname='xyz' 
      distance='xyz' 
      title={rowData.title} 
      message={rowData.description} 
      score='xyz' 
      stars='xyz' 
      starcolors={colors.General.black} 
      vouched="Example" /> 
    ) 
    } 
}) 

なぜこれが私に与えられますか？フェッチャーをcomponentDidMountに入れてレンダリングすると、無限に発生します。

この実行/ライフサイクルの問題をより効率的に制御するにはどうすればよいですか？私はまた、if (this.props.friendFeed.friend.name !== undefined)と言っているIF文にしようとしましたが、信じているかどうかは分かりませんが、this.props.friendFeed.friend.name is undefinedという赤い画面が返ってきます。キー内のオブジェクトを呼び出す際に問題になることはありますか？それが定義される前に、定義されていないものを呼び出すことができますか？

Answer 1

2つの解決策があります。まず、定義されていないオブジェクトのキーを呼び出すことに関する最後の質問について考えてみましょう。任意の時点fooでサブオブジェクトキーもundefinedであるかどうかをチェックすることができない、undefinedであれば...

{ 
    foo: { 
    bar: 'text' 
    } 
} 

をこのオブジェクトを考えてみましょう。データがロードされているときに未定義の可能性のある最高のルートオブジェクトを決定する必要があります。

fooがundefinedの場合、このステートメントは失敗します。if (foo.bar !== undefined)ただし、このステートメントはok：if (foo.hasOwnProperty('bar'))、または技術的にはif (foo !== undefined)となります。

あなたの主な問題として、私の推測では、データの解析には非同期的なことがあります。これは私が実装する方法ですfetch ...私はテキストに体を処理する約束側を活用する必要がどのように

function checkStatus(response) { 
    if (response.status >= 200 && response.status < 300) { 
    return response.text().then((text) => { 
     if (text == "") return "" 
     return JSON.parse(text) 
    }) 
    return response.json() 
    } 
} 

get(id, query) { 
    let url = this.API_URL() + '/' + id + this._generateQuery(query) 
    return fetch(url, { 
    method: 'get', 
    headers: this._headers() 
    }).then(this._checkStatus) 
    .then((data) => { 
     return data 
    }) 

}

注意してください。あなたのchangeComponentのようなことをやってみると、データが解析されるまでsetState（そしてその後はtrueに設定する）を呼び出さないようにします。インラインであるため、ただちにsetStateが呼び出されている可能性があります。次に、構文解析を完了している間に（変数参照を渡すだけなので）不完全なデータでコンポーネントをレンダリングします。