[英]Not able to access response object via this.props | React/ Redux
When I try to access to the response object in my component it doesnt throw me an error but it wont either print. 当我尝试访问组件中的响应对象时,它不会引发错误,但不会打印。 I do get access to the response in the component but thats it, i cant actually print something.
我确实可以访问组件中的响应,但仅此而已,我实际上无法打印任何内容。
Actions File 动作文件
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
};
}
My reducer file 我的减速器文件
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;
}
And finally my component where Im trying to render some results of the response. 最后是我试图在其中呈现响应结果的组件。
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);
I uploaded a Screenshot img of the response : http://prntscr.com/fbs531 我上传了响应的截图img: http : //prntscr.com/fbs531
What is wrong with my code? 我的代码有什么问题?
The issue is that in fetchUser action you use a Promise and return it in payload field. 问题是,在fetchUser操作中,您使用Promise并将其返回到有效负载字段中。 This promise does not contain any information you need like response data.
该承诺不包含您需要的任何信息,例如响应数据。 So to fix the issue you need to dispatch action only when response is retrieved (eg in
then
success callback). 因此,要解决此问题,您仅需要在检索到响应时(例如,在
then
成功回调中)才调度操作。
To implement it you need to pass mapDispatchToProps in the second argument in connect
function for your component and pass dispatch function to your action: 要实现它,您需要在
connect
函数的第二个参数中为组件传递mapDispatchToProps,并将dispatch函数传递给您的操作:
function mapDispatchToProps(dispatch) {
return {
fetchUser: id => fetchUser(id, dispatch)
}
}
Then in the action just do the following 然后在操作中执行以下操作
function fetchUser(id, dispatch) {
const request = axios.get(`${BASE_URL}/${id}`)
.then(response => dispatch({
type:FETCH_USER,
payload: response
}));
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.