Question

我遇到需要在componentWillMount（）

中获取更新道具的情况

我的布局：

＆＃13;

map

＆＃13;

@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

我需要将用户ID传递给fetchPlaces，类似于componentWillMount() { console.log(this.props); this.props.dispatch(fetchPlaces(1)) }

但是this.props还没有user.id，在布局的this.props.dispatch(fetchPlaces(this.props.user.id)我更新了商店，但是在调用了componentWillReceiveProps组件的componentWillMount（）之后得到了更新

控制台日志：

更新

我有BasicInfo的连接符，渲染方法中的BasicInfo始终未定义。但是商店现在有了用户价值。

有没有办法从Layout传递数据？ this.props.user被称为的地方？因为那里正在调用{this.props.children}。

＆＃13;

BasicInfoConnector

＆＃13;

客户端JS

＆＃13;

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);

＆＃13;

Answer 1

假设您想要在componentWillMount中获取位置，唯一的解决方案是使用条件渲染完全不渲染组件，直到用户ID可用，因为componentWillMount只被调用一次。像这样：

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

更新

您需要将连接（订阅）的组件导出到redux store。您正在导出尚未连接的组件。只需在组件声明

之前删除export default即可

class BasicinfoConnector extends React.Component

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

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

这可以解决您的问题。

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

1 个答案: