我如何从 Axios 请求访问数据

Question

我将 React JS 与 Redux 结合使用，在使用 Axios 从请求中检索数据时遇到了一点问题..
这是我的 Axios 请求：

import Axios from 'axios';

class UsersApi {
  static getAllUsers() {
    return Axios.get('http://localhost:3001/user').then(response => {
      return response;
    });
  }
}

export default UsersApi;

这就是我要使用我的数据的地方：

import React, {Component} from 'react';
import {connect} from 'react-redux';

class UserList extends Component {

  render(){
    console.log(this.props.users);
    return(
      <ul>
      </ul>
    );
  }
}


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


export default connect(mapStateToProps)(UserList);

这是动作：

import UsersApi from '../api/UsersApi';

export function loadUsers() {
  return function(dispatch) {
    return UsersApi.getAllUsers().then(users => {
      dispatch(loadUsersSuccess(users));
    }).catch(error => {
      throw(error);
    });
  };
}

export function loadUsersSuccess(users) {
  return {type: 'LOAD_USERS_SUCCESS', users};
}

这是我的减速器：

import initialState from './initialState';

export default function usersReducer(state = initialState.users, action) {
  switch(action.type) {
    case "LOAD_USERS_SUCCESS":
      return action.users
    default:
      return state;
  }
}

这就是我对 console.log 的看法：Result console.log
当我尝试显示第一个用户的密码时，我输入 console.log(this.props.users.data["0"].pwd) 但这不起作用..

如果我在请求中尝试 return response.data["0"].pwd，我可以使用 console.log(this.props.users).

但问题是我想要每个用户的数据..

我需要一些帮助。 :)

Answer 1

作为一种正确的 redux 做事方式，就在 get 调用的 then 中，您需要触发一个操作 SET_USERS ，您将在其中使用 reducer 来用从 api.

回来的新用户替换您的状态

Answer 2

首先，您需要将用户添加到您的状态。我看到你正在使用 redux，所以你应该在收到你的用户后发送一个动作并让你的 reducer 处理它：

Axios.get('http://localhost:3001/user').then(response => {
  dispatch(usersLoaded(response.data));
});

您应该有一个名为 usersLoaded 的操作和一个处理它的减速器：

const usersLoaded = users => ({ type: 'USERS_LOADED', payload: users });

const users = (state = [], action) => {
  switch(action.type) {
    case 'USERS_LOADED':
       return action.payload;
    default:
       return state;
  }
}

这样您就可以在 UserList 组件中访问您的用户

我如何从 Axios 请求访问数据

How can i access data from an Axios request

reactjs

redux

axios