可以发送来自reducer数据之前的组件调用操作创建者

Question

我有一个react组件，它应该从API中呈现用户列表。我在生命周期钩子方法中调用我的动作创建者，如下所示：

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

我已经检查过，并且正在返回数据并以正确的格式发送给reducer。但是当我尝试在我的组件中呈现这些用户时，页面上没有显示任何内容：

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

我没有收到任何错误或警告，检查后我的组件在页面上呈现，但内容空白。当我尝试做一些控制台日志时，似乎在reducers之前调用了componentWillMount（），我不知道为什么。这意味着在调用fetchUsers（）动作创建者之后，我的用户数组为空。

编辑：将状态和动作创建者映射到道具

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

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

我将所有操作都导入到组件的顶部。我的reducer将操作创建者的有效负载（数组）添加到应用程序状态。

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

我的动作创建者只是发出一个get请求并将其发送给reducers：

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

编辑2：

收到的JSON数据示例：

Answer 1

您没有将用户数据传递给函数

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

Answer 2

您可以尝试插入类似

的布尔值

 loaded: false,

到你的reducer中的initialState并将它们放在你的行动中

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

然后您可以在组件中插入一些内容

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,
};

开始调用您的数据。我希望它可以帮到你; - ）

Answer 3

如果你看一下生命周期，第一个是componentwillmount（）。 在渲染之前调用它。 refer