Javascript 使用react进行API调用

我知道以前有人问过这个问题，但由于react版本的更新，我似乎无法让它正常工作。我是一个新手，除了我所学的教程之外，我从未使用过API。我正在尝试使用“电影数据库（IMDB备选方案）”离开网站Rapidapi。到目前为止，我只是尝试控制台。记录数据，这样我就可以看到我想要拉什么，并确保我正确地拉数据，但是，我似乎无法让它工作。我试图遵循最近在youtube上的教程，但无法让它像我在图坦卡蒙一样工作。这是我的代码美国联邦航空局：

import React, {useEffect, useState} from 'react';
import './App.css';

useEffect(() => {
  getMovies();
}, []);

const getMovies = async() => {
  const response = await fetch("https://movie-database-imdb-alternative.p.rapidapi.com/?page=1&r=json&s=Avengers%20Endgame", {
    "method": "GET",
    "headers": {
      "x-rapidapi-host": APP_HOST,
      "x-rapidapi-key": APP_KEY
    }
  }).then(response => {
    console.log(response);
  }).catch(err => {
    console.log(err);
  });

  const data = await response.json();

  console.log(data);
}

const App = () => {
  return (
    <div className="App">

    </div>
  );
}

export default App;

import React，{useffect，useState}来自“React”；
导入“/App.css”；
useffect（（）=>{
获取电影（）；
}, []);
const getMovies=async（）=>{
const response=等待获取（“https://movie-database-imdb-alternative.p.rapidapi.com/?page=1&r=json&s=Avengers%20Endgame", {
“方法”：“获取”，
“标题”：{
“x-rapidapi-host”：应用程序主机，
“x-rapidapi-key”：应用程序密钥
}
})。然后（响应=>{
控制台日志（响应）；
}).catch（错误=>{
控制台日志（err）；
});
const data=wait response.json（）；
控制台日志（数据）；
}
常量应用=（）=>{
返回(
);
}
导出默认应用程序；

---

注意：分配给响应变量的所有内容都是API给我的代码（我使用了JavaScript获取片段）。APP_主机和APP_密钥也来自该网站，我将它们存储在这些变量中，并将其隐藏起来。我在该网站、多个在线教程和Youtube上查看了类似的问题，但没有发现类似的问题，我仍然无法使其正常工作。我使用的是相同版本的create react APP 2.1.8我在编写工作教程时正在使用。提前感谢！

钩子只能在函数组件的主体内部调用。 这是您应该对代码进行的修改

import React, {useEffect, useState} from 'react';
import './App.css';

const App = () => {

useEffect(() => {
  getMovies();
}, []);

const getMovies = async() => {
  const response = await fetch("https://movie-database-imdb-alternative.p.rapidapi.com/?page=1&r=json&s=Avengers%20Endgame", {
    "method": "GET",
    "headers": {
      "x-rapidapi-host": APP_HOST,
      "x-rapidapi-key": APP_KEY
    }
  }).then(response => {
    console.log(response);
  }).catch(err => {
    console.log(err);
  });

  const data = await response.json();

  console.log(data);
}

  return (
    <div className="App">

    </div>
  );
}

export default App;

import React，{useffect，useState}来自“React”；
导入“/App.css”；
常量应用=（）=>{
useffect（（）=>{
获取电影（）；
}, []);
const getMovies=async（）=>{
const response=等待获取（“https://movie-database-imdb-alternative.p.rapidapi.com/?page=1&r=json&s=Avengers%20Endgame", {
“方法”：“获取”，
“标题”：{
“x-rapidapi-host”：应用程序主机，
“x-rapidapi-key”：应用程序密钥
}
})。然后（响应=>{
控制台日志（响应）；
}).catch（错误=>{
控制台日志（err）；
});
const data=wait response.json（）；
控制台日志（数据）；
}
返回(
);
}
导出默认应用程序；

正如一些评论中所指出的，您必须将

useffect

移动到您的

应用程序

功能中：

您还混合了async/await和Promissions

下面是一个使用async/await的版本（我添加了一些状态以显示结果或任何错误）：

import React，{useffect，useState}来自“React”
导入“./App.css”
const getMovies=async（）=>{
const response=等待获取(
'https://movie-database-imdb-alternative.p.rapidapi.com/?page=1&r=json&s=Avengers%20Endgame',
{
标题：{
“x-rapidapi-host”：应用程序\主机，
“x-rapidapi-key”：应用程序密钥
}
})
如果（！response.ok）{
抛出新错误（`Error:${response.status}${response.statusText}`）
}
const data=wait response.json（）
返回数据
}
常量应用=（）=>{
const[movies，setMovies]=useState（）
const[error，setError]=useState（）
useffect（异步（）=>{
试一试{
setMovies（等待getMovies（））
}捕获（错误）{
setError（error.message）
}
}, [])
返回(
{错误&&
{错误}
{电影&&
{movies.length}movies}
)
}
导出默认应用程序

但无法让它像我在tut中那样工作。

你能分享什么不起作用吗？是否有错误，

数据是否未按预期记录到控制台？当我查看检查器时，它告诉我：“未捕获的错误：无效的钩子调用。”。钩子只能在函数组件的主体内部调用。“就像我说的，我以前从来没有这样做过，所以我不确定如何去纠正我也查过的错误。它没有像我希望的那样登录到控制台。错误消息告诉您问题所在。将效果挂钩移动到函数组件内。@Quentin在我的代码中会移动什么？就像我说的，我是根据另一个教程来做这件事的，到目前为止都是一样的，我说的是“效果挂钩”。这里只有大约20行代码。哪一位看起来像是效果挂钩？那一点。
import React, { useEffect, useState } from 'react'
import './App.css'

const getMovies = async () => {
  const response = await fetch(
          'https://movie-database-imdb-alternative.p.rapidapi.com/?page=1&r=json&s=Avengers%20Endgame',
          {
            headers: {
              'x-rapidapi-host': APP_HOST,
              'x-rapidapi-key': APP_KEY
            }
          })
  if (!response.ok) {
    throw new Error(`Error: ${response.status} ${response.statusText}`)
  }
  const data = await response.json()
  return data
}

const App = () => {
  const [movies, setMovies] = useState()
  const [error, setError] = useState()

  useEffect(async () => {
    try {
      setMovies(await getMovies())
    } catch (error) {
      setError(error.message)
    }
  }, [])

  return (
    <div className='App'>
      {error &&
      <span>{error}</span>}
      {movies &&
      <span>{movies.length} movies</span>}
    </div>
  )
}

export default App