React-Native/Redux - 在组件挂载之前无法获取数据答案

【问题标题】：React-Native/Redux - Unable to fetch data before component mountsReact-Native/Redux - 在组件挂载之前无法获取数据
【发布时间】：2017-11-27 15:55:43
【问题描述】：

我在从我的网络服务获取数据并在组件呈现之前更新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);

好像只在组件渲染后才派发动作，如何在组件挂载之前派发动作？

【问题讨论】：

我真的不认为您可以在组件挂载并从同一个组件启动该过程之前完成所有这些工作。

标签： reactjs react-native redux redux-thunk

【解决方案1】：

由于您是从 Web 服务获取数据，它可能会花费未知的时间，并且您无法在该时间之前保持组件的呈现。您需要在这里维护一个state，它告诉您是否已从服务器检索到任务。如果没有，那么你渲染一条消息说Fetching quests 或其他东西，一旦你有一些任务要渲染，你就开始渲染这些。伪代码想要类似

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
  }
}

当您检索任务时更新hasSomeQuests 状态并且至少有一个您可以在屏幕上呈现。

【讨论】：