javascript - React - 在渲染页面之前获取数据

Question

我遇到了一种情况，我需要在 componentWillMount() 中获取更新的 props

我的布局:

@connect((store) => {
 //console.log(store);
 return {
       element: store.elements.elements,
       connections: store.connections.connections,
       attributes: store.attributes.attributes,
       media: store.media.media,
       places: store.places.places,
       user: store.user.user
 };
})

export default class Layout extends React.Component {

    componentWillMount() {
        this.props.dispatch(fetchUser())
    }

    componentWillReceiveProps(nextProps) {
        this.props.dispatch(updateStoreUser(nextProps.user))
    }

    shouldComponentUpdate(nextProps) {
        console.log(nextProps);
        return true;
    }

  render() {
    const { location } = this.props;

    return (
          <div className="main-container">
              <Header/>
              <NavConnector/>
              {this.props.children}
          </div>
    );
  }
}

{this.props.children} 将根据路由渲染页面。

我有一个 BasicInfo 组件:

componentWillMount() {
    console.log(this.props);        
    this.props.dispatch(fetchPlaces(1))
}

我需要将用户ID传递给fetchPlaces，像这样this.props.dispatch(fetchPlaces(this.props.user.id)

但是 this.props 还没有 user.id，在我正在更新商店的布局的 componentWillReceiveProps 中，但在 BasicInfo 的 componentWillMount() 之后更新> 组件被调用。

控制台日志:

更新

我有一个用于 BasicInfo 的连接器，渲染方法内的 this.props.user 始终未定义。但商店现在已经有了用户值(value)。

有什么办法可以从Layout中传递数据吗？ {this.props.children} 被调用的地方？因为这是调用 BasicInfoConnector 的地方。

import React from "react"
import * as Redux from 'react-redux';
import Basicinfo from "./Basicinfo"

const mapStateToProps = function (store) {
    return {
        elements: store.elements.elements,
        places: store.places.places,
        geocode : store.geocode.geocode,
        user : store.user.user
    };
};

class BasicinfoConnector extends React.Component{

  render() {
      console.log(this.props.user);
    return (
        <BasicInfoConnector elements={this.props.elements} places={this.props.places} geocode={this.props.geocode} user={this.props.user}/>
    );
  }
}

export default Redux.connect(mapStateToProps)(BasicinfoConnector);

客户端JS

import React from "react"
import ReactDOM from "react-dom"
import { Router, Route, IndexRoute, hashHistory } from "react-router"
import { Provider } from "react-redux"
import { useScrollToTop } from "scroll-behavior"
import store from "./store"

import '../styles/sass/master/global.scss'

import Layout from "./components/Layout";
import Alerts from "./components/Dashboard/Alerts/Alerts"
import AttributesConnector from "./components/Dashboard/Attributes/AttributesConnector"
import BasicInfoConnector from "./components/Dashboard/Basicinfo/BasicinfoConnector"
import ConnectionsConnector from "./components/Dashboard/Connections/ConnectionsConnector"
import MediaConnector from "./components/Dashboard/Media/MediaConnector"
import Stats from "./components/Dashboard/Stats/Stats"

const app = document.getElementById('app')

ReactDOM.render(
    <Provider store={store}>
        <Router histroy={hashHistory} onUpdate={() => window.scrollTo(0, 0)}>
            <Route path="/" component={Layout}>
                <IndexRoute component={BasicInfoConnector}></IndexRoute>
                <Route path="location" component={BasicInfoConnector}></Route>
                <Route path="alerts" component={Alerts}></Route>
                <Route path="attributes" component={AttributesConnector}></Route>
                <Route path="connections" component={ConnectionsConnector}></Route>
                <Route path="media" component={MediaConnector}></Route>
                <Route path="stats" component={Stats}></Route>
            </Route>
        </Router>
    </Provider>,
app);

Answer 1

假设您想要获取 componentWillMount 中的位置，唯一的解决方案是在用户 ID 可用之前根本不使用条件渲染来渲染组件，因为 componentWillMount 仅被调用一次。像这样的事情:

{this.props.user?<BasicInfo />:null}

更新:

您需要导出一个连接(订阅)到 redux store 的组件。您正在导出尚未连接的组件。只需删除组件声明之前的导出默认值

class BasicinfoConnector extends React.Component    

并在连接语句之前添加导出默认值。

export default Redux.connect(mapStateToProps)(BasicinfoConnector);

这应该可以解决您的问题。