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

我上传了回复的屏幕截图：http://prntscr.com/fbs531

我的代码出了什么问题？

Answer 1

问题是在fetchUser操作中，您使用Promise并将其返回到payload字段中。此承诺不包含您需要的任何信息，如响应数据。因此，要解决问题，您只需在检索到响应时（例如在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访问响应对象React / Redux

1 个答案: