コンポーネントをロードする前に、APIからコンポーネントのプロパティを取得する必要がある場合はどうすればいいですか？

Question

シーンの中にあるコンプ（react-native-router-flux）があります。それは人々が好みの果物を選ぶことを可能にします。親コンプで

import React, {Component} from 'react'; 
import {View, Text, StyleSheet} from 'react-native'; 
import {MKCheckbox} from 'react-native-material-kit'; 

var styles = StyleSheet.create({}); 

export default class PickAFruit extends Component { 
    render() { 
    console.log(this.props.fruits); 
    return (
     <View> 
     { 
      this.props.fruits.map((x)=> { 
      return (
       <View key={x.key}> 
       <Text>{x.key}</Text> 
       <MKCheckbox checked={this.props.checked} key={x.key} onCheckedChange={(e) => { 
        this.props.update(e, '' + x.key) 
       }}/> 
       </View> 
      ) 
      }) 
     } 
     </View> 
    ) 
    } 
} 

私はdidMountでAPIから果物のリストをロードしています：

componentDidMount() { 
    ApiInst.getFruits().then((fruits) => { 
     console.log(fruits); 
     console.log(this.props.fruits); 
     this.props.fruits = fruits;   
    }); 

    } 

私も親クラスのデフォルトfruits配列を設定しています。プロパティはAPI経由でロードされないようですが、果物のリストは常に「未知」の値であり、決して新しい値ではありません。プロフィールシーンが読み込まれる前に果物のリストを読み込む必要がありますか？コンポーネントがAPIから来る場合、コンポーネントのプロパティを設定する正しい時期はいつですか？

setStateは簡単な答えと思われますが、これらの設定は状態のように「感じる」ものではなく、ビルド時に（つまりコンポーネントがビルドされたとき、アプリではなく）注入されるプロパティのように感じます。これは本当の違いなしの区別ですか？

Answer 1

this.props.fruits = fruits; 

は、子コンポーネントには影響しません。正直なところ、私はそれがまったく動作しないと思います。あなたは、フラックスアーキテクチャを使用しない場合、私は最善の解決策がcomponentDidMountに親の状態を（）を更新し、子コンポーネントに小道具としてそれを渡すことだと思う：

componentDidMount() { 
    ApiInst.getFruits().then((fruits) => { 
     this.setState({fruits: fruits});   
    }); 
} 

render() { 
    return (
     <PickAFruit fruits={this.state.fruits} /> 
    ); 
} 

すべての状態変化がレンダリングinvokreます（）メソッド、 API呼び出し後には、PickAFruitコンポーネントが再レンダリングされ、果物が小道具として渡されます。

Answer 2

小道具を変更することはできません。小道具は親コンポーネントから子コンポーネントに渡され、親コンポーネントのみがそれらを変更することができます。代わりに

使用setState：

this.setState({fruits: fruits}); 

そして状態からそれらにアクセス：

<PickAFruit fruits={this.state.fruits} /> 

ます。また、コンポーネントのコンストラクタでは、デフォルトの状態を設定することもできます。

constructor(props) { 
    super(this); 
    this.state = {fruits: null}; 
}