React-Native/Redux - コンポーネントをマウントする前にデータを取得できません

Question

Webサービスからデータを取得し、コンポーネントがレンダリングされる前にthis.propsを更新する際に問題があります。

Homepage.js

import React, { Component } from 'react'; 
import {View, Text, StyleSheet, Image} from 'react-native'; 
import { Header, Footer , CarouselSlide} from './common'; 
import { connect } from 'react-redux'; 
import { getQuests} from '../actions'; 
import Carousel from 'react-native-snap-carousel'; 

const SLIDER_1_FIRST_ITEM = 1; 

class HomePage extends Component { 

    constructor (props) { 
    super(props); 
    this.state = { 
     slider1ActiveSlide: SLIDER_1_FIRST_ITEM, 
     slider1Ref: null 
    }; 
    } 
    componentWillMount() { 
    this.props.getAllQuests(); 
    } 

    _renderItemWithParallax({item, index}, parallaxProps) { 
    return(
     <CarouselSlide 
     data={item} 
     parallaxProps={parallaxProps} 
     /> 
    ); 
    } 

    render() { 
    const {containerStyle, questHeaderStyle, questHeaderTextStyle} = styles; 
    const {slider1ActiveSlide, slider1Ref} = this.state; 

    return(
     <View style={containerStyle}> 
     <Header /> 

     <View style={questHeaderStyle}> 
      <Text style={questHeaderTextStyle}>Quests</Text> 
     </View> 

     <Carousel 
      ref={(c) => { if (!this.state.slider1Ref) { this.setState({ slider1Ref: c}); } }} 
      data={this.props.questObject} 
      renderItem={this._renderItemWithParallax} 
      sliderWidth={300} 
      itemWidth={300} 
      hasParallaxImages={true} 
      firstItem={1} 
      inactiveSlideScale={0.94} 
      inactiveSlideOpacity={0.7} 
      enableMomentum={false} 
      loop={true} 
      loopClonesPerSide={2} 
      autoplay={true} 
      autoplayDelay={500} 
      autoplayInterval={3000} 
      onSnapToItem={(index) => this.setState({ slider1ActiveSlide: index})} 
     /> 

     <Footer /> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    containerStyle: { 
    flex: 1 
    }, 
    questHeaderStyle: { 
    left: 17.5, 
    top: 5 
    }, 
    questHeaderTextStyle: { 
    color: '#EF6D69', 
    fontSize: 17.5, 
    fontWeight: '800' 
    } 
}) 

const mapStateToProps = ({quest}) => { 
    const { error, loading, questObject } = quest; 

    return { error, loading, questObject}; 
}; 

const mapDispatchToProps = (dispatch) => { 
    return { 
    getAllQuests:() => { 
     dispatch(getQuests()); 
    } 
    }; 
}; 

export default connect(mapStateToProps, mapDispatchToProps)(HomePage); 

それは、コンポーネントが描画された後部品が実装される前に、私はアクションをディスパッチないか、アクションをのみ派遣するようですか？

Answer 1

Webサービスからデータを取得するため、時間が不明で、その時間までコンポーネントのレンダリングを保持できません。ここで必要なのは、サーバーからクエストが取得されたかどうかを示すstateを維持することです。そうでなければ、Fetching questsと言っているメッセージをレンダリングし、レンダリングするクエストがあればレンダリングを開始します。擬似コードは、あなたがクエストを取得し、あなたが画面上にレンダリングすることができる少なくとも1つのを持っているときは、hasSomeQuests状態を更新

class HomePage extends Component { 
    state = { 
    hasSomeQuests: false 
    } 

    updateHasSomeQuestsToRender = (newValue) => { 
    this.setState({ 
     hasSomeQuests: newValue 
    }) 
    } 

    render() { 
    if(!this.state.hasSomeQuests) { 
     return <Fetching quests> 
    } 

    return JSX with the quests 
    } 
} 

ような何かをしたいと思います。