無法通過this.props訪問響應對象| React / Redux

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

我的減速器文件

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並將其返回到有效負載字段中。 該承諾不包含您需要的任何信息，例如響應數據。 因此，要解決此問題，您僅需要在檢索到響應時（例如，在then成功回調中）才調度操作。

要實現它，您需要在connect函數的第二個參數中為組件傳遞mapDispatchToProps，並將dispatch函數傳遞給您的操作：

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