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

Question

我有一种情况需要在 componentWillMount()

中获取更新的道具

我的布局：

@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 中我正在更新商店，但是在 [=15= 的 componentWillMount() 之后更新] 组件被调用。

控制台日志：

更新

我有一个 BasicInfo 的连接器，渲染方法中的 this.props.user 始终未定义。但是商店现在有用户价值了。

有什么方法可以从布局传递数据吗？ {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 存储的组件。您正在导出尚未连接的组件。只需删除组件声明

之前的 export default

class BasicinfoConnector extends React.Component

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

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

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

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

React - Get data before rendering pages

javascript

reactjs

redux

react-redux