ReactJS: Ax ios 'asyn c запрос возвращает' undefined ' - PullRequest
Новая
       6

ReactJS: Ax ios 'asyn c запрос возвращает' undefined '

1 голос
/ 01 марта 2020

Я делаю небольшой проект, использующий Mov ie DB API - ReactJs, и у меня возникают проблемы с использованием функций asyn c, я делаю вызовы API во многих частях проектов, в которых работал все они, но теперь это не работает.

Мой топор ios config: 

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);
}

и для рендеринга списка mov ie Я передаю рекомендации моему компоненту, который использует map только для рендеринга каждого mov ie, 

<MovieList header={'Recommentadion'} movieList={recommendations} />

Но приложение всегда делает sh сообщение "Не удается прочитать свойство 'map' of undefined", я посмотрел в свойствах сети в 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":{

  }
}

Ответы [ 3 ]

5 голосов
/ 01 марта 2020

Я думаю, что это поможет вам. Вы должны экспортировать свой топор ios config следующим образом: 

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]);
1 голос
/ 01 марта 2020

Объяснить топор ios .создать и пример

топор ios .создать для начального .. (config)

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

Теперь создайте функция, использующая ax ios, например: 

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

и вызов при написании: 

const res = await get(`/movie/${movieId}/recommendations`);
1 голос
/ 01 марта 2020

Попробуйте сделать: 

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

Это выведет весь объект JSON в строку в консоли. Поскольку вы получаете неопределенное значение и никаких ошибок, вы, скорее всего, обращаетесь к объекту JSON неправильно. Распечатав содержимое, вы увидите, как выглядит ваш JSON объект, чтобы вы могли успешно получить свойство 'results'.

...