javascript axios GET请求返回未定义且无法设置值

n3h0vuf2  于 2023-02-28  发布在  Java
关注(0)|答案(2)|浏览(188)

我尝试使用axios设置从API的GET请求中接收到的数据,但是设置的值是undefined,尽管console.log给了我正确的输出。

const[movie, setMovie] = useState({});

  useEffect(()=>{
   const baseURL = `https://api.themoviedb.org/3/movie/${id}?api_key=${API_KEY}`;
        async function getData(){
          try{
            const response = await axios.get(baseURL);
            console.log(response.data); //returns correct value
            setMovie(response.data); //sets undefined to the state movie
          }
          catch(error){
            console.error(error);
          }
        }
        getData();
        console.log(movie);//logs undefined
  },[]);

在POSTMAN和console.log()中测试时,API请求返回一个对象,但我无法将其设置为状态。

ar5n3qh5

ar5n3qh51#

在这个场景中setMovie是异步的,所以console.log将返回更新前的值,在您的情况下,它将返回undefined,这是因为组件没有重新呈现。
更多信息点击这里

w6lpcovy

w6lpcovy2#

下面是我使用从API请求接收到的数据设置状态所做的工作。

const[movie, setMovie] = useState({
    ImgPath: '',
    Title: '',
    ReleaseDate: '',
    Rating: '',
    Description: ''
  });

  useEffect(()=>{
   const baseURL = `https://api.themoviedb.org/3/movie/${id}?api_key=${API_KEY}`;
        axios.get(baseURL)
        .then(res => {
          console.log(res.data);
          let movieData = res.data;
          setMovie({
            ImgPath: movieData.poster_path,
            Title: movieData.title,
            ReleaseDate: movieData.release_date,
            Rating: movieData.vote_average.toString(),
            Description: movieData.overview
          })
        })
        .catch(err => console.error(err))
  }, []);

相关问题