无法通过 this.props 访问响应对象 |反应/归还

Question

当我尝试访问组件中的响应对象时，它没有向我抛出错误，但也不会打印。我确实可以访问组件中的响应，但仅此而已，我实际上无法打印一些东西。

动作文件

 import axios from 'axios';
 import { FETCH_USERS, FETCH_USER } from './types';


const BASE_URL = "http://API_URL/endpoint/"
export function fetchUsers(id,first_name, last_name, dob) {
  const request = axios.post(`${BASE_URL}member-search?patientId=${id}&firstName=${first_name}&lastName=${last_name}&dateOfBirth=${dob}&length=10`).then(response => { return response; })

  return {
    type: FETCH_USERS,
    payload: request
  };
}

export function fetchUser(id) {
  const request = axios.get(`${BASE_URL}members/${id}/summary/demographics`).then(response => { return response; })

    return{
      type: FETCH_USER,
      payload: request
    };
}

我的reducer文件

import _ from 'lodash';
import {
  FETCH_USERS, FETCH_USER
} from '../actions/types';

export default function(state = [], action) {
  switch (action.type) {
    case FETCH_USER:
      return { ...state, [action.payload.data.member.id]: action.payload.data.member };
      // return [ action.payload.data.member, ...state ];
    case FETCH_USERS:
      return _.mapKeys(action.payload.data.searchResults, 'id');
  }

  return state;
}

最后是我的组件，我试图在其中呈现一些响应结果。

    import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { fetchUser } from '../actions';



class PatientWrapper extends Component{
  componentDidMount() {
    const { id } = this.props.match.params;
    this.props.fetchUser(id);

  }
  render(){
    const { user } = this.props;
    console.log('this.props response: ',user);

    if(!user){
      return <div>loading...</div>;
    }

    return(
      <div>
        Name: {user.firstName}
        Last Name: {user.lastName}
      </div>
    )
  }
}
function mapStateToProps({ users }, ownProps) {
  // return { users };
  return { user: users[ownProps.match.params.id] };
}
export default connect (mapStateToProps, { fetchUser })(PatientWrapper);

我上传了响应的截图 img：http://prntscr.com/fbs531

我的代码有什么问题？

Answer 1

问题在于您在 fetchUser 操作中使用了 Promise 并且 return 它在有效负载字段中。此承诺不包含您需要的任何信息，例如响应数据。因此，要解决此问题，您需要仅在检索到响应时才分派操作（例如，在 then 成功回调中）。

要实现它，您需要在组件的 connect 函数的第二个参数中传递 mapDispatchToProps 并将调度函数传递给您的操作：

function mapDispatchToProps(dispatch) {
    return {
        fetchUser: id => fetchUser(id, dispatch)
    }
}

然后在动作中只做下面的事情

function fetchUser(id, dispatch) {
    const request = axios.get(`${BASE_URL}/${id}`)
        .then(response => dispatch({
            type:FETCH_USER,
            payload: response
        }));
}

有关完整示例，请参阅 JSFiddle

无法通过 this.props 访问响应对象 |反应/归还

Not able to access response object via this.props | React/ Redux

javascript

reactjs

redux

react-router-dom