Question

ReactJS：Axios 的异步请求返回“未定义”

2020-03-01

838

javascript reactjs api async-await axios

我正在做一个使用电影数据库 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);
}

为了呈现电影列表，我将推荐传递给我的组件，该组件仅使用 map 来呈现每部电影，

<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":{

  }
}

Answer 1

尝试执行：

const res = await api.get(`/movie/${movieId}/recommendations`);
console.log(JSON.stringify(res));

这会将整个 JSON 对象打印到控制台中的字符串中。由于您得到未定义且没有错误，因此您很可能错误地访问了 JSON 对象。通过打印出内容，这将向您显示您的 JSON 对象的样子，以便您可以成功获取“结果”属性。

Answer 2

解释 axios.create 和示例

axios.create 用于初始.. (配置)

const axios = Axios.create({ withCredentials: false/true });

现在，使用 axios 创建一个函数，如下所示：

function get(...args) {
  return axios.get(...args)
}

并在编写时调用：

const res = await get(`/movie/${movieId}/recommendations`);

Answer 3

我认为这对你有帮助。你应该像这样导出你的 axios 配置：

const APIClient = axios.create({
  baseURL: 'https://api.themoviedb.org/3/',
  params: {
    api_key: process.env.REACT_APP_API,
  }
});

export default APIClient;

然后导入它以获取另一个文件中的数据：

import  APIClient  from "YOUR AXIOS CONFIG FILE";

  export const getMovieRecommendations = async (movieId) => {
  const { data } = await APIClient.get(`/movie/${movieId}/recommendations`);
  return data;
}

在你的容器中设置这个：

const { setMenuSelected } = useContext(MovieContext);
const [movie, setMovie] = useState({})
const [recommendations, setRecommendations] = useState([]);
const [isLoading, setIsLoading] = useState(true)

const getList=async(movieId)=>{
const res = await getMovieRecommendations(movieId);
  setRecommendations(res.results);
  setIsLoading(false);
}

useEffect(() => {
  animateScroll.scrollToTop({ smooth: true });
  setMenuSelected('');
  getList(match.params.id);
  setMovie(getMovieDetails(match.params.id, setMovie));
}, [match.params.id, recommendations, isLoading]);