在页面加载时，我在我的 内分派index.js一个store.dispatch(getWeatherReports());点击天气 API 的操作。此操作贯穿整个redux过程，最终将返回的数据添加到名为 的状态的属性中weatherReports。此属性是一个带有空数组的对象。现在，我将粘贴代码的概述.. 并非所有内容都可以为您省去一行一行的麻烦，因为从 API 输出数据不是我遇到的问题。

这是我的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组件，它接受这个状态并希望将它传递给一个愚蠢的组件。

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：

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组件呈现它。因此，当我尝试访问数据Uncaught TypeError: Cannot read property 'main' of undefined(…)时收到以下错误：执行以下操作时：reports[0].main.temp 发生的事情是这阻止了我的应用程序向前移动，因此store.dispatch(getWeatherReports());永远不会被调用。因此，如果我{reports[0].main.temp}从等式中删除，那么该过程将继续并且动作被分派。然后我可以调用带有 HMR 和万岁的方程！！数据在那里...

所以我的问题，感谢您的耐心，我怎样才能得到它，以便我的哑组件等待尝试访问状态上的这些属性，直到我的初始调度操作发生之后？