値が

Question

nullでない場合にのみ、だから私は、単純な2は、クラス

ダッシュボード（親）

class UserDashboardPage extends Component { 
    render() { 
    console.log("UserDashboardPage") 
    console.log(this.props.users) 
    return (
     <div> 
     <UserInfoComponent user={this.props.users} /> 
     </div> 
    ); 
    } 
} 

// map Users from store to Props 
function mapStateToProps({ users }) { 
    return { users }; 
} 

UserInfoComponent（子）

export class UserInfoComponent extends Component { 
    render() { 
    console.log("UserInfoComponent") 
    console.log(this.props.user) 
    return (
     <h2>{this.props.user.firstName}</h2> 
    ); 
    } 
} 

反応していた印刷this.propsに反応します

と私が抱えている問題は、this.props.user.firstNameをUserInfoComponentに印刷しますが、th e値は最初はnullであり、値がデータを取得したときにコンポーネントが再レンダリングしません。

userReducers

const initialState = { data: [], user: null }; 

const UserReducer = (state = initialState, action) => { 
    switch (action.type) { 
    case ADD_USER : 
     return { 
     data: [action.user, ...state.data], 
     }; 
    case UPDATE_USER : 
     return { 
     user: action.user, 
     }; 
    case LOGIN_USER: { 
     const user = (action.response.statusCode === 200) ? action.response.user : null; 

     console.log(user); 

     return { 
     user, 
     }; 
    } 
    default: 
     return state; 
    } 
}; 

Example of how the data changes

Answer 1

はちょうどあなたが未定義のエラーのプロパティを読み取ることができない原因となっthis.props.user['property']ですべての問題を回避することができ、ユーザのintial状態空のオブジェクトにすることでconst initialState = { data: [], user: {} };へのconst initialState = { data: [], user: null }を変更します。

さらに、最初にuserが空のオブジェクトであれば、何か別のものを表示するべきでしょう。ユーザー情報を取得するAJAXリクエストを行っている場合は、読み込みコンポーネントを実行している可能性があります。あなたはそうのようなあなたの減速に新しい状態を追加する必要があります。

const initialState = { data: [], user: {}, loading: true }; 

し、ログインユーザーからのthatsを想定し、バックユーザ情報を得れば、その後、あなたはどちらかであるべき減速もloading: falseを設定することができますがObject.assignまたは...演算子を使用して、元の状態を変更しないようにします。 http://redux.js.org/docs/recipes/UsingObjectSpreadOperator.htmlを参照してください。あなたのレデューサーこの

const UserReducer = (state = initialState, action) => { 
    switch (action.type) { 
    case ADD_USER : 
     return { 
     ...state, 
     data: [action.user, ...state.data], 
     }; 
    case UPDATE_USER : 
     return { 
     ...state, 
     user: action.user, 
     }; 
    case LOGIN_USER: { 
     const user = (action.response.statusCode === 200) ? action.response.user : null; 

     console.log(user); 

     return { 
     ...state, 
     user, 
     loading: false 
     }; 
    } 
    default: 
     return state; 
    } 
}; 

ようになり、その後、あなたのUserDashboardコンポーネント

class UserDashboardPage extends Component { 
    render() { 
    console.log("UserDashboardPage") 
    console.log(this.props.users) 

    const content = this.props.loading ? '....loading' : <UserInfoComponent user={this.props.users} />; 
    return (
     <div> 
     {content} 
     </div> 
    ); 
    } 
} 

で、これは必ずそれがロードを示し、その後、ユーザー負荷たら、それはユーザーの情報が表示されますようになりますので、アップデート。

Answer 2

それはあなたがusersプロパティの各エントリの1 UserInfoComponentをレンダリングしたいことがあります。

usersがuserオブジェクトの配列である場合は、それ以外の場合は

{ users.map((user) => (<UserInfoComponent user={user} />) } 

をしたい、どちらか（defaultPropsを使用して）usersのデフォルト値として空のオブジェクトを提供したり、中users値が存在するかどうかを確認可能性がありますあなたのmapStateToProps機能あなたの減速で