レデューサーからのデータを送る前にコンポーネントを呼び出すアクション作成者

Question

私は、APIからユーザーのリストをレンダリングするはずの反応コンポーネントを持っています。私はそうのように私のライフサイクルフックメソッドで自分の行動の作成者を呼び出しています：

componentWillMount() { 
    this.props.fetchUsers(); 
    } 

私がチェックしているとのデータが返され、正しいフォーマットで減速に派遣されています。私は私のコンポーネントでこれらのユーザーをレンダリングしようとする。しかし、何もページに示していないされている：

renderUser(user) { 
    return (
     <div className="card card-block"> 
     <h4 className="card-title">{user.name}</h4> 
     <p className="card-text">{user.company.name}</p> 
     <a className="btn btn-primary" href={user.website}> 
      Website 
     </a> 
     </div> 
    ); 
    } 
    render() { 
    return (
     <div className="user-list">{this.props.users.map(user => this.renderUser)}</div> 
    ); 
    } 

が、私はエラーや警告を取得していない、と私のコンポーネントは、それを検査した後、ページにレンダリングされているが、空でありますコンテンツのいくつかのコンソールログを作成しようとすると、コンポーネントWillMount（）がレデューサーの前に呼び出されているように見えますが、理由はわかりません。これは、fetchUsers（）アクションクリエータを呼び出した後の私のユーザの配列が空であることを意味します。

EDIT：小道具

に状態と行動クリエイターのマッピング

function mapStateToProps(state) { 
    return { users: state.users }; 
} 

export default connect(mapStateToProps, actions)(UserList); 

私はコンポーネントの上部にすべての私の行動をインポートします。私のレデューサーは、アクション作成者からアプリケーション状態にペイロード（配列）を追加します。

export default function(state = [], action) { 
    switch (action.type) { 
    case FETCH_USERS: 
     return [...state, action.payload.data]; 
    } 
    return state; 
} 

私のアクションの作成者は、単にget要求を行い、減速にそれを送信します。

export function fetchUsers() { 
    const request = axios.get("https://jsonplaceholder.typicode.com/users"); 
    return { 
    type: FETCH_USERS, 
    payload: request 
    }; 
} 

EDIT 2：受信JSONデータの

例：

Answer 1

ライフサイクルを見ると、最初のコンポーネントはcomponentwillmount（） 。 レンダリング前に呼び出されます。 refer

Answer 2

あなたは関数にユーザーデータを渡していない

<div className="user-list">{this.props.users.map(user => this.renderUser(user))}</div> 

Answer 3

あなたの減速であなたの初期状態に

loaded: false, 

のようなブール値を挿入しようと、あなたの行動

でそれらを置くことができます

case USERS_LOAD : 
loaded: true, 
users: action.users, 
... users, 

次にsomethiあなたのコンポーネントの中でそれを好きにしてください。

const Users = ({ loaded, users }) => { 
if (!loaded) { 
return <div>Is loading ...</div> 
} 
    return (
    <p>Voici les utilisateurs :</p> 
{users.map(user => { 
<li>{user}</li>} 
); 
}; 
Users.propTypes = { 
    users: PropTypes.object.isRequired, 
    loaded: PropTypes.bool.isRequired, 
}; 

あなたのデータを呼び出すことができます。私はそれがあなたを助けることを願っています;-)