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）但这不起作用..

如果我尝试在请求中返回response.data [“0”]。pwd，我可以使用console.log（this.props.users）获取密码。

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

我需要一些帮助。：）

Answer 1

作为一种正确的改进方式，在then来电get内，你需要向SET_USERS发起一个动作，你将使用你的减速器取代你的final_list = [['section', 'section', 'section', 3, 'mirror', 0, 'blue'], ['section', 'section', 'section', 3, 'mirror'], ['section', 'section', 'section', 3, 'light',], ['subsection', 'section', 'section', 3, 'light',]] criteria_list = ['section', 'section', 'section', 3] cp = True exclude_keyword = 'mirror' for each_list in final_list: for check in criteria_list: if check in each_list and exclude_keyword not in each_list: cp = True else: cp = False if cp == True: print(each_list)说明你的新用户从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请求中访问数据

2 个答案: