状態がcomponentWillMountで更新されていません

Question

componentwillmount関数で、反応コンポーネントの状態をapi呼び出しから更新しようとすると、期待どおりに機能しません。値が設定されていません。

export default class ListOfProducts extends Component { 
     componentWillMount() { 
      console.log('component currently mounting'); 
      fetchOrder().then(data => { 
       console.log('order api call has been finished.', data); 
       this.setState(data, function() { 
     //this should print new data but i am still getting old data 
        console.log('current this.state.', this.state.orders) 
       }) 
      }) 
     } 
     constructor(props) { 
      super(props); 

      this.state = { 
       "orders": { 
        "order_items": [] 
       } 
      }; 
     } 
     render() { 
      let productList = []; 
      let productUnit = (
       <View> 
      {this.state.orders.order_items.map(function(order,i){ 
      return <ProductListItem 
       delivered={true} 
       productSKU={3}/> 
      })} 
      </View> 
      ); 
      return productUnit; 
     } 
    } 

Answer 1

ご非同期要求を実行する場合、私はあなたがcomponentDidMountライフサイクルの方法でそれらを実行示唆しています。これはReactjs documentation for componentDidMountに基づく推奨パスです。

最初のレンダリングが発生した後に、ただちに が呼び出されます（サーバではない）。ライフサイクルのこの時点で、 は、子どもの参照情報にアクセスできます（例： のDOM表現にアクセスする）。 子コンポーネントのcomponentDidMount（）メソッドは、親コンポーネントより前に呼び出されます。

他のJavaScriptフレームワークと統合する場合は、setTimeoutまたはsetIntervalを使用してタイマー を設定するか、AJAX要求を送信するには、このメソッドで 操作を実行します。

Answer 2

おそらく、あなたは変更する必要があります。 は に 「コンポーネントを{拡張」