javascript - ReactJS:Axios 的异步请求返回“未定义”
问题描述
我正在使用电影 DB API 是 ReactJs 做一个小项目,并且我在使用异步函数时遇到问题,我在项目的许多部分中进行 api 调用,并且在所有项目中都有效,但现在它不起作用。
我的 axios 配置:
export default axios.create({
baseURL: 'https://api.themoviedb.org/3/',
params: {
api_key: process.env.REACT_APP_API,
},
});
在我的容器里我有这个
const { setMenuSelected } = useContext(MovieContext);
const [movie, setMovie] = useState({})
const [recommendations, setRecommendations] = useState([]);
const [isLoading, setIsLoading] = useState(true)
useEffect(() => {
animateScroll.scrollToTop({ smooth: true });
setMenuSelected('');
getMovieRecommendations(setRecommendations, match.params.id, setIsLoading);
setMovie(getMovieDetails(match.params.id, setMovie));
}, [match.params.id, recommendations, isLoading]);
我正在获取其他文件中的数据只是为了组织项目
export const getMovieRecommendations = async (
setRecommendations,
movieId,
setIsLoading) => {
const res = await api.get(`/movie/${movieId}/recommendations`);
setRecommendations(res.results);
setIsLoading(false);
}
为了渲染电影列表,我将建议传递给仅使用地图渲染每部电影的组件,
<MovieList header={'Recommentadion'} movieList={recommendations} />
但是应用程序总是崩溃说“无法读取未定义的属性'map'”,我查看了 chrome 中的网络属性,我的请求完成时没有错误。
更新:
返回console.log(JSON.stringify(res))
我删除了结果,所以它不会变得太大
{
"data":{
"page":1,
"results":[
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{}
],
"total_pages":2,
"total_results":40
},
"status":200,
"statusText":"",
"headers":{
"cache-control":"public, max-age=14400",
"content-type":"application/json;charset=utf-8",
"etag":"W/\"56ca661f28e43dc3dd2ce41816b517c5\""
},
"config":{
"transformRequest":{
},
"transformResponse":{
},
"timeout":0,
"xsrfCookieName":"XSRF-TOKEN",
"xsrfHeaderName":"X-XSRF-TOKEN",
"maxContentLength":-1,
"headers":{
"Accept":"application/json, text/plain, */*"
},
"method":"get",
"baseURL":"https://api.themoviedb.org/3/",
"params":{
"api_key":"fe5b485ed12153ca357c3275cfad6c5c"
},
"url":"https://api.themoviedb.org/3/movie/399121/recommendations"
},
"request":{
}
}
解决方案
尝试做:
const res = await api.get(`/movie/${movieId}/recommendations`);
console.log(JSON.stringify(res));
这会将整个 JSON 对象打印到控制台中的字符串中。由于您未定义且没有错误,因此您很可能错误地访问了 JSON 对象。通过打印出内容,这将向您显示您的 JSON 对象的外观,以便您可以成功访问“结果”属性。
推荐阅读
- r - 聚合函数将特殊字符(例如 aͤ)转换为括号和字符序列
- javascript - 将数组的其余元素与第一个元素连接起来
- kubernetes - 来自 pod 和部署的事件重定向到文件
- python - 从 TXT 文本文件打印数据
- tensorflow - How does this split of train and evaluation data ensure there is no overlap?
- vba - 无法使 ConcatRelated 函数(由 Allen Browne 制作)工作
- go - 在 Golang 中使用文字值来引用常量
- git - git diff,带有外部 diff 程序,只需一次
- varnish - 如何防止cookie被删除
- loops - 遍历数组是编写简单循环的坏方法吗?