在动作调度后渲染组件 [英] Render component after action dispatch

问题描述

页面加载后，我在 index.js 内调度，操作 store.dispatch（getWeatherReports（））; 命中天气API。此操作将通过 redux 进程，并最终将返回的数据添加到名为 weatherReports 的状态的属性中。此属性是一个空数组的对象。现在，我将粘贴代码的概述..并非所有这些都可以帮助您省去线路上的麻烦，因为从API输出数据不是我的问题。

Upon page load, I am dispatching, inside my index.js, an action store.dispatch(getWeatherReports()); that hits a weather API. This action goes through the redux process and eventually adds the data returned to a property on the state called weatherReports. This property is an object with an empty array. Now, I'm going to paste in an overview of the code.. not all of it to save you the trouble from going line to line, as outputting the data from the API is NOT the issue I am having.

这是我的 index.js ：

import 'babel-polyfill';
import React from 'react';
import {render} from 'react-dom';
import configureStore from './store/configureStore';
import {Provider} from 'react-redux';
import {Router, browserHistory} from 'react-router';
import {StyleRoot} from 'radium';
import routes from './routes';
import {loadBlogs} from './actions/blogActions';
import {loadUsers, getActiveUser} from './actions/userActions';
import {getWeatherReports} from './actions/weatherActions';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import '../node_modules/toastr/build/toastr.min.css';
import './styles/app.scss';

const store = configureStore();
store.dispatch(loadBlogs());
store.dispatch(loadUsers());
store.dispatch(getActiveUser());
store.dispatch(getWeatherReports());

render(
  <StyleRoot>
    <Provider store={store}>
      <Router history={browserHistory} routes={routes}/>
    </Provider>
  </StyleRoot>,
  document.getElementById('app')
);

相信这会通过正确的流程来返回数据。然后我创建了一个 smart 组件，该组件采用此状态并将其传递给哑组件。

Trust that this goes through the right process to return the data. I have then created a smart component that takes this state and looks to pass it to a dumb component.

class DashboardPage extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      weatherReports: []
    };

  }

  <ContentBox
    title="What The Wind Blew In"
    content={<WeatherReport reports={this.props.weatherReports} />
  />

再次，相信我有适当的 mapStateToProps ， mapDispatchToProps 等。然后，我会在 dumb 组件中显示数据。 WeatherReport.js ：

Again, trust that I have appropriately mapStateToProps, mapDispatchToProps, etc. I then look to display the data in the dumb component. WeatherReport.js:

import React, {PropTypes} from 'react';
import styles from '../common/contentBoxStyles';

const WeatherReport = ({reports}) => {
    console.log(reports);
    return (
        <div style={styles.body} className="row">
            <div style={styles.weatherBoxContainer}>
                <div className="col-sm-2 col-md-offset-1" style={styles.weatherBoxContainer.weatherCard}>
                    <div style={styles.weatherBoxContainer.weatherReport}>
                        <div style={styles.weatherBoxContainer.currentTemp}>
                            HERE IS MY PROBLEM!!
                            {reports[0].main.temp}
                        </div>
                    </div>
                    CA
                </div>
                <div className="col-sm-2" style={styles.weatherBoxContainer.weatherCard}>
                    <div style={styles.weatherBoxContainer.weatherReport}>
                        Report
                    </div>
                    UT
                </div>
                <div className="col-sm-2" style={styles.weatherBoxContainer.weatherCard}>
                    <div style={styles.weatherBoxContainer.weatherReport}>
                        Report
                    </div>
                    MN
                </div>
                <div className="col-sm-2" style={styles.weatherBoxContainer.weatherCard}>
                    <div style={styles.weatherBoxContainer.weatherReport}>
                        Report
                    </div>
                    DC
                </div>
                <div className="col-sm-2" style={styles.weatherBoxContainer.weatherCard}>
                    <div style={styles.weatherBoxContainer.weatherReport}>
                        Report
                    </div>
                    NY
                </div>
            </div>
        </div>
    );
};

WeatherReport.propTypes = {
    reports: PropTypes.array
};

export default WeatherReport;

我的潜在问题是在我的调度操作返回数据之前..我试图通过它来渲染它我的 dumb 组件。因此，在尝试访问数据时收到以下错误：未捕获TypeError：执行以下操作时无法读取未定义（...）的属性main： reports [0] .main.temp
发生的事情是阻止我的应用程序向前移动，以便 store.dispatch（getWeatherReports（））; 永远不会被调用。因此，如果我从等式中删除 {reports [0] .main.temp} ，则该过程将继续，并且将调度该操作。然后我可以用HMR和hooray来称呼这个等式！数据在那里...

My underlying issue is that before my dispatch action returns the data.. I am trying to render it through my dumb component. Thus I receive the following error when trying to access the data: Uncaught TypeError: Cannot read property 'main' of undefined(…) when doing the following: reports[0].main.temp What is happening is this is stopping my application from moving forward so that the store.dispatch(getWeatherReports()); never gets called. Thus if I remove the {reports[0].main.temp} from the equation, then the process continues and the action gets dispatched. Then I can call the equation w/ HMR and hooray!! The data is there...

所以我的问题，感谢与我的关系，我怎么能得到它，以便我的哑组件等待尝试访问这些在我的初始调度动作发生之后状态的属性？

So my question, and thanks for bearing with me, is how can I get it so that my dumb component waits to try and access these properties on the state until AFTER my initial dispatched actions occur?

推荐答案

检查是否报告[0] 在尝试访问 .main 之前存在。如果它是 undefined 然后显示加载微调器或其他东西......

Check if reports[0] exists before trying to access .main. If it's undefined then display a loading spinner or something...

 if (!reports[0]) return <div>Loading...</div>

 return (
   // your component like normal.
 )

这篇关于在动作调度后渲染组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！