React-Native/Redux - 구성 요소 탑재 전에 데이터를 가져올 수 없습니다.

Question

웹 서비스에서 데이터를 가져오고 구성 요소가 렌더링되기 전에 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

웹 서비스에서 데이터를 가져 오는 동안 알 수없는 시간이 걸릴 수 있으며 그 시간까지 구성 요소 렌더링을 유지할 수 없습니다. 여기서 필요한 것은 퀘스트가 서버에서 검색되었는지를 알려주는 state을 유지하는 것입니다. 그렇지 않다면, Fetching quests 또는 뭔가를 말하는 메시지를 렌더링하고 일단 렌더링 할 퀘스트가 있으면 렌더링을 시작합니다. 의사는 당신이 퀘스트를 검색하여 화면에 렌더링 할 수있는 적어도 하나있을 때 당신은 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 
    } 
} 

같은 것을하고 싶습니다.