Question

这是我使用react redux promise中间件的Dashboard.js。从Facebook获取数据然后将其传递给调度操作。我想问为什么我在this.props.brandsInformation上获得空值？

我有办法访问componentDidMount函数（）中的数据吗？

任何帮助都会非常感激，这对我来说似乎是一个障碍。

    /* global FB */

import React from 'react';
import { cyan600, pink600, purple600, orange600 } from 'material-ui/styles/colors';
import Assessment from 'material-ui/svg-icons/action/assessment';
import Face from 'material-ui/svg-icons/action/face';
import ThumbUp from 'material-ui/svg-icons/action/thumb-up';
import ShoppingCart from 'material-ui/svg-icons/action/shopping-cart';
import InfoBox from '../components/dashboard/InfoBox';
import NewOrders from '../components/dashboard/NewOrders';
import MonthlySales from '../components/dashboard/MonthlySales';
import BrowserUsage from '../components/dashboard/BrowserUsage';
import RecentlyProducts from '../components/dashboard/RecentlyProducts';
import globalStyles from '../styles';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import Header from '../components/Header';
import LeftDrawer from '../components/LeftDrawer';
import NavbarComponent from './Navbar';
import withWidth, { LARGE, SMALL } from 'material-ui/utils/withWidth';
import ThemeDefault from '../theme-default';
import Data from '../data';
import { Link } from 'react-router-dom'
import { connect } from 'react-redux';
import { socialActions } from '../_actions';
import { bindActionCreators } from 'redux';
import FacebookReduxLogin from 'facebook-login-redux-react';


class DashboardPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false
    };
    this.login = this.login.bind(this);
    this.logout = this.logout.bind(this);
    this.getUserInformation = this.getUserInformation.bind(this);

  }


  login(response) {
    this.props.actions.getLoginStatus(response.status);
  }
  logout(response) {
    this.props.actions.getLoginStatus(response.status);
    this.props.actions.getUserInformation(null);
    this.props.actions.getBrandInformation(null);

  }


  getUserInformation() {

    if (this.props.facebookLogin.isConnected && !this.props.userInformation) {
      FB.api('/me', 'GET', { fields: 'id,name,email' },
        userInformation => {
          this.props.actions.getUserInformation(userInformation).then(function(user) {
          });
        }
      );
      FB.api('/me/accounts', 'GET',
        brandInformation => {
          this.props.actions.getBrandInformation(brandInformation).then(function(brands) {
          });
        }
      );
    }


  }

  handleDrawer(bool) {
    this.setState({ open: bool });
  }

    componentDidMount() {
       //WHy is this null? how can i process the promise data and put it on this variable
       console.log(this.props.brandInformation)
  }

  render() {
    const navDrawerOpen = this.state.open;
    const paddingLeftDrawerOpen = 236;
    const { id, name, email } = this.props.userInformation || { id: null, name: null, email: null };
    this.getUserInformation();
    const styles = {
      container: {
        margin: '80px 20px 20px 15px',
        paddingLeft: navDrawerOpen && this.props.width !== SMALL ? paddingLeftDrawerOpen : 0

      }
    };
    return (
      <MuiThemeProvider muiTheme={ThemeDefault}>

        <div>
            <NavbarComponent handleDrawer={this.handleDrawer.bind(this)}/>
              <div style={styles.container}>
                <div>
                  <h3 style={globalStyles.navigation}>Application / Dashboard</h3>

                        <FacebookReduxLogin
                          appId='1413936068720959'
                          verbose={false}
                          version={'v2.10'}
                          onWillMount={this.login}
                          onLoginEvent={this.login}
                          onLogoutEvent={this.logout}
                          onClick={() => this.props.actions.startFetching()}
                        />

                </div>
              </div>
        </div>
      </MuiThemeProvider>

    );
  }
}

function mapStateToProps(state) {
  console.log(state)
  return {
    userInformation: state.userInformation,
    brandInformation: state.brandInformation,
    facebookLogin: state.facebookLogin
  };

}


function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(socialActions, dispatch)
  };
}

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

Answer 1

在加载数据之前无法访问数据。这就是你在第一次渲染时获得null prop的原因。您的组件生命周期如下所示：

构建组件，将异步请求发送到Facebook以获取数据。
组件已呈现 - 此时Facebook请求尚未完成，因此没有数据，您将获得null prop。
Facebook请求已完成，您的行动已发送。
Redux状态已更改，触发重新渲染组件，这次使用正确的数据。

你无能为力 - 这就是异步请求的工作方式。您拥有的唯一选择是这样的，可能封装在某种更高级别的组件中：

render() {
    if(null === this.props.userInformation || null === this.props.brandInformation) {
        return <span>Still loading data...</span>;
    } else {
        // render what you want here
    }
}

使用ReactJS的Null道具承诺redux中间件

1 个答案: