使用 react 进行 API 调用 [关闭]答案

【问题标题】：Making an API call with react [closed]使用 react 进行 API 调用 [关闭]
【发布时间】：2019-12-01 20:55:53
【问题描述】：

我知道这个问题过去曾被问过，但由于更高版本的反应发生了变化，我似乎无法让它发挥作用。我对反应比较陌生，除了我遵循的教程之外，从未使用过 API。我正在尝试使用 Rapidapi 站点之外的“电影数据库（IMDB 替代方案）。截至目前，我只是在尝试 console.log 数据，以便我可以看到我想要提取的内容并确保我正确提取数据，但是，我似乎无法让它工作。我正在尝试按照最近在 youtube 上的教程进行操作，但无法像我在 tut 中那样让它工作。到目前为止，这是我的代码：

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;

注意：分配给响应变量的所有内容都是 API 给我的代码（我使用了 JavaScript fetch sn-p）。 APP_HOST 和 APP_KEY 也来自该站点，我将它们存储在这些变量中，我将它们隐藏起来。我在这个网站和几个在线教程和 Youtube 上查看了类似的问题，但似乎没有什么相似之处，我仍然无法让它工作。我正在使用 create-react-app 版本 2.1.8，这与我在完成工作教程时使用的版本相同。提前致谢！

【问题讨论】：

but cannot get it to work like I did in the tut. 你能分享什么不起作用吗？是否有错误，data 没有按预期登录到控制台？
正确，当我查看检查器时，它告诉我：“未捕获的错误：无效的钩子调用。只能在函数组件的主体内部调用钩子。”就像我说的那样，我以前从未这样做过，所以我不确定如何修复我也查过的那个错误。它没有像我想要的那样登录到控制台。
错误信息告诉你问题出在哪里。在函数组件内移动效果钩子。
@Quentin 我的代码中会移动什么？就像我说的，我是根据另一个教程来做这个的，到目前为止一切都是一样的。
我说的是“效果挂钩”。那里只有大约 20 行代码。哪一点看起来可能是效果挂钩？那一点。

标签： javascript reactjs api create-react-app

【解决方案1】：

正如某些 cmets 所指出的，您必须将 useEffect 移动到您的 App 函数中：

您还混合了 async/await 和 Promise。选择一个。

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

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

【讨论】：

【解决方案2】：

只能在函数组件的主体内部调用钩子。 这些是你应该对你的代码做出的争执。

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;

【讨论】：