通过this.props访问Redux状态会引发"Cannot read property name of undefined."

Question

Redux Dev Tools view 编辑：这是redux开发工具的图片。它用对象数组填充状态。每当我尝试访问数组中的对象时，我都会收到此错误 反应错误

我有一个服务器，当它收到 get 请求时，它会从 yelp 获取数据，并将响应从 yelp 发送到客户端。

当我尝试访问从 getFoodPlans(( 函数调用的服务器响应时，它会在 redux webtools 中显示为状态，但如果您尝试通过 props 访问它，则会显示"找不到未定义的属性名称"。

如果我对端点使用 axios 调用并使用响应设置本地状态，则可以访问所有属性。我有一种感觉，它与服务器有关，因为如果我从服务器发送整个业务对象，我会在 axios 中遇到同样的错误，我无法访问未定义的属性。

这与我如何将数据从服务器发送到客户端有关吗？

谢谢。

服务器：

router.get('/food', (req, res) => {
const position = Math.floor(Math.random() * 15);
axios
.get(`${foodSearch}location=kansascity
&&radius=${radius}&&cost=1,2,3&&categories=food`, {
headers: { Authorization: `Bearer ${apiKey}` }
})
.then(result => {
res.json(result.data.businesses[position]);
})
.catch(err => console.log(err));
});

计划行动.js：

import axios from 'axios';
import { GET_FOOD_PLANS, PLAN_LOADING, GET_ERRORS, GET_ACTIVITY_PLANS } from 
'./types';
// Get Plans
export const getFoodPlans = () => dispatch => {
dispatch(setPlanLoading());
axios
.get('/api/data/food')
.then(res =>
dispatch({
type: GET_FOOD_PLANS,
payload: res.data
})
)
.catch(err =>
dispatch({
type: GET_FOOD_PLANS,
payload: err
})
);
};

计划减速器.js：

import { GET_FOOD_PLANS, GET_ACTIVITY_PLANS, PLAN_LOADING } from 
'../actions/types';
const initalState = {
food: {},
activities: {},
triggered: false,
loading: false
};
export default function(state = initalState, action) {
switch (action.type) {
case PLAN_LOADING:
return {
...state,
loading: true
};
case GET_FOOD_PLANS:
return {
...state,
food: action.payload,
loading: false
};
case GET_ACTIVITY_PLANS:
return {
...state,
activities: action.payload,
loading: false
};
default:
return state;
}
}

计划明天.js：

import React from 'react';
import PropTypes from 'prop-types';
import { getFoodPlans } from '../../actions/planActions';
import { connect } from 'react-redux';
import axios from 'axios';
import ResultBox from '../Resultbox/ResultBox';
class PlanTomorrow extends React.Component {
constructor(props) {
super(props);
this.state = {
load: false,    
activity1: {},
};
}
componentWillMount() {
this.props.getFoodPlans();
axios.get('/api/data/activity').then(res => this.setState({ activity1: 
res.data }));
}
render() {
return (
<div className="tomorrowform">
<h2>Tomorrows Plan:</h2>
<ul className="tomorrowform-data">
<li id="item1">
<ResultBox
activity={this.props.plan.food.name}
phone={this.props.plan.food.display_phone}
rating={this.props.plan.food.rating}
/>
</li>
<li id="item2">
<ResultBox
activity={this.state.activity1.name}
phone={this.state.activity1.display_phone}
rating={this.state.activity1.rating}
/>
</li>
</ul>
</div>
);
}
}
PlanTomorrow.propTypes = {
auth: PropTypes.object.isRequired,
plan: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
auth: state.auth,
plan: state.plan
});
export default connect(
mapStateToProps,
{ getFoodPlans }
)(PlanTomorrow);

Answer 1

两点：

1. 从 componentDidMount(( 执行 API 调用。这是外部 API 调用的最佳选择。由反应文档建议。
在
2. 通过连接将操作传递给组件时，应像this.props.getFoodPlans()一样调用操作。
3. 由于您在组件中执行外部调用，因此数据在第一次渲染时不会处于正确的形状。你也应该检查一下。 在渲染方法中的返回之前添加此内容。

const isFoodExists = !this.props.plan.food || !this.props.plan.food.length;
if (this.props.loading || !isFoodExists) {
return null;
}

在这里，您应该将食物的数据作为数组返回。并将其作为数组传递给您的组件。