Reactjs React Redux如何使用ownProps路由参数进行调度

我似乎不知道如何使用路由参数/ownProps加载组件/对象我的配置基本上与react redux应用程序的标准配置相同，我的操作/还原器工作正常，但对于该组件，数据没有预加载。我假设这意味着在定义“user”对象之前，它试图使用该对象时会发生一场竞赛。我之所以这样认为，是因为它偶尔会起作用——它会通过reducer（s）和api调用——结果看起来不错。我是否应该先创建一个默认的“用户”对象

路线看起来像

[tld]/user/1234

组件

import React, {Component, PropTypes} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as userActions from '../../actions/userActions';
import User from './User';

class UserPage extends Component{
   constructor(props, context){
      super(props, context);
   }

   componentDidMount(){
      this.fetchData();
   }

   fetchData(){
      const {userId} = this.props;
      const {fetchUser} = this.props.actions;
      fetchUser(userId);
   }

   render(){
      // This component when rendered has undefined property exceptions 
      //      though sometimes it works :)
      return(<User user={this.props.currentUser} />);
   }
}

function mapStateToProps(state, ownProps){
   return {
      currentUser: state.user,
      userId: ownProps.params.id
   }
}

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

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

import React，{Component，PropTypes}来自'React'；
从'react redux'导入{connect}；
从“redux”导入{bindActionCreators}；
从“../../actions/userActions”导入*作为userActions；
从“./User”导入用户；
类UserPage扩展组件{
构造函数（道具、上下文）{
超级（道具、背景）；
}
componentDidMount（）{
这是fetchData（）；
}
fetchData（）{
const{userId}=this.props；
const{fetchUser}=this.props.actions；
获取用户（userId）；
}
render（）{
//渲染时，此组件具有未定义的属性异常
//虽然有时它是有效的：）
return（）；
}
}
函数mapStateToProps（状态，ownProps）{
返回{
当前用户：state.user，
userId:ownProps.params.id
}
}
功能图DispatchToprops（调度）{
返回{
操作：bindActionCreators（用户操作、调度）
};
}
导出默认连接（mapStateToProps、mapDispatchToProps）（用户页）；

更新 所以我想出了一个丑陋的方法来解决这个问题

return (
    {Object.keys(this.props.currentUser).length > 0 ? 
       <User user={this.props.currentUser} /> ? null }
)

返回(
{Object.keys（this.props.currentUser）.length>0？
？空}
)

---

这不可能是正确的方法此外，我还注意到，如果我只是更改路由id，则在等待api调用延迟返回新用户时，会短暂闪烁先前加载的用户…抱歉，react/redux对我来说是相当新的

我可以想到以下几件事：

检查是否定义了

this.props.currentUser

，实际上是一个好主意，但我会使用以下语法：

const { currentUser } = this.props;
return currentUser && <User user={currentUser} />;

在上述代码中，

fetchUserStart

，

fetchUserDone

和

fetchUserError

都是影响用户状态的操作（此处未显示代码）

fetchUserStart

可以将用户状态设置为未定义，而

fetchUserDone

将其设置为从异步获取中获得的用户。当您的UserPage组件连接到此状态时，它将通过显示/不显示用户组件作出反应

---

有几种方法可以避免未定义的道具：

1在用户界面中定义初始状态

const initialState = { user:'', ... };
const user = (state = initialState, action) => {...};
export default user;

2使用

state.user | |“”“

3有时需要在加载数据之前不允许安装组件

const LoadingBlock = props => {
    return (<div>{props.isLoading ? 'loading...' : props.children}</div>);
};
LoadingBlock.defaultProps = {
    isLoading: true
};

///then wrap component that will be loading

<LoadingBlock isLoading={this.props.isLoading}>
   <UserComponent user={this.props.user}>
</LoadingBlock>

const mapStateToProps = (state, ownProps) =>({
      currentUser: state.user||"",
      userId: ownProps.params.id
});

const LoadingBlock = props => {
    return (<div>{props.isLoading ? 'loading...' : props.children}</div>);
};
LoadingBlock.defaultProps = {
    isLoading: true
};

///then wrap component that will be loading

<LoadingBlock isLoading={this.props.isLoading}>
   <UserComponent user={this.props.user}>
</LoadingBlock>

render(){
    let {user} = this.props
    return(
        <div>{user && <UserComponent user={user}>}</div>
    )
}

render(){
    let {user} = this.props
    return(
        <div>{user ? <UserComponent user={user}> : "loading"}</div>
    )
}

class Control extends React.Component {...}
Control.defaultProps = {value: "somevalue"};