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

Question

我似乎无法弄清楚如何使用路由参数/ownProps 加载组件/对象，我的配置基本上与 React Redux 应用程序的标准相同，并且我的操作/ reducer 工作正常，但对于此组件数据未预加载。我认为这意味着发生了一场竞赛，它试图在定义“用户”对象之前使用它。我之所以这么认为，是因为它偶尔会起作用——它正在通过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);

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

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

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

Answer 1

有一些方法可以避免未定义的 Prop :

1 在用户 reducer 中定义初始状态

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

2 使用 state.user||""处理 mapStateToProps 中的未定义

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

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>

4 如果 this.props.user 未定义，则不显示 userComponent

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

5 如果 this.props.user 未定义，则显示组件，否则显示一些“内容”

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

6定义默认 Prop

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