在React(Axios、React、Redux)上发出请求/显示数据时出现奇怪问题

Question

我正在尝试制作一个个人应用程序，但我遇到了一些请求问题，与API无关。

请求的结果返回以下JSON：https://pastebin.com/raw/vpdq2k6S

我的代码：

class Home extends Component {
componentDidMount() {
this.props.getTrending();
}
render() {
const { trending } = this.props.trending;
console.log(trending);
const Card = (props) => (
<Panel {...props} bordered header='Card title'>
{trending.results.map((i) => (
<React.Fragment key={i.id}>
<h6>{i.title}</h6>
</React.Fragment>
))}
</Panel>
);
return (
<div className='Home'>
<FlexboxGrid justify='center'>
<Card />
</FlexboxGrid>
</div>
);
}
}
export default connect(
(state) => {
return {
trending: state.trending,
};
},
{ getTrending }
)(Home);

我的行动：

import { GET_TRENDING } from "../types";
import axios from "axios";
export const getTrending = () => async (dispatch) => {
const res = await axios.get(
`https://api.themoviedb.org/3/movie/popular?api_key=KEY&language=en-US&page=1`
);
dispatch({
type: GET_TRENDING,
payload: res.data,
});
};

我的减速器：

import { GET_TRENDING } from "../types";
const initialState = {
trending: [],
loading: true,
};
export default function trendingReducer(state = initialState, action) {
switch (action.type) {
case GET_TRENDING:
return {
...state,
trending: action.payload,
loading: false,
};
default:
return state;
}
}

忽略与UI组件库相关的Card常量等。你可以从代码中看到，我正在记录"趋势"的结果。但我得到了一个空数组，但这里有一个奇怪的部分：

如果我将映射函数从映射改为"；趋势。结果"；至"；趋势"；然后我刷新，控制台返回一个空数组和另一个正确的数组。如果我把它改回"；趋势。结果"；React自动重新加载页面两次返回正确的数组，并在应用程序上显示数据；无法读取未定义"的属性映射；显然是因为不知怎么的，我没有得到正确的数据。

以前有人吃过这个吗？这完全没有意义，如果是的话，有人能指导我如何解决这个问题吗？我试着完全关闭React服务器并重新启动它，但这并不能解决问题。我的大脑被冻结了(如果需要，我可以录制一个片段(

Answer 1

答案很简单。您所要做的就是首先从api中获取数组，然后通过它进行映射。trending.results没有设置，因此会显示错误。Cannot read property map of undefined

使用三元运算符：

{trending.results && trending.results.map((i) => (
<React.Fragment key={i.id}>
<h6>{i.title}</h6>
</React.Fragment>
))}

Answer 2

试试这种方法。

export const getTrending = () => async (dispatch) => {
const res = await axios.get(
`https://api.themoviedb.org/3/movie/popular?api_key=KEY&language=en-US&page=1`
);
dispatch({
type: GET_TRENDING,
payload: res.data.results,
});
};


const Card = (props) => (
<Panel {...props} bordered header='Card title'>
{trending && trending.map((i) => (
<React.Fragment key={i.id}>
<h6>{i.title}</h6>
</React.Fragment>
))}
</Panel>
);