1

我正在做一个小项目来学习 React。它是一个电影应用列表，它从 themoviedb.org 获取数据。

我可以成功调用 API 并获取我需要的数据。

但是，就目前而言，我在登录页面上有四个清单，每个清单都是一个单独的组件，并且在每个组件中我都有单独的 API 调用，参数略有不同。

  const [movies, setMovies] = useState([]);

  useEffect(() => {
    setMovies(API.get("movie/popular"));
  }, [movies]);

每次调用都会在每个组件中使用 useState() 保存数据。但是有人向我指出这是重复，并且该应用程序没有任何 API 层。

因此，基于此，我创建了一个名为 API 的新文件，其中有一个函数可以根据传递给它的 URL 获取数据。

const API_KEY = "TOP_SECRET_API_KEY"; // 
const BASE_API_URL = "https://api.themoviedb.org/3/"; 

export const API = {
  get: async (url) => {
    const path = BASE_API_URL + url + "?api_key=" + API_KEY;

    const res = await fetch(path);
    const json = await res.json();
    // const { json: json_1, res: res_1 } = { json, res };
    return json;
  },
};

但这不是传递结果数组，而是传递 Promise。我通过谷歌搜索尝试了不同的方法，但对我没有任何帮助。

谁能指出我正确的方向？

4

1 回答 1

1

您需要在 useEffect 函数中添加 await ：

useEffect(() => {
    async function fetchData() {
       const results = await API.get("movie/popular")
       setMovies(results)
    }
    fetchData();
  }, []);
于 2020-06-10T14:55:43.657 回答