我正在做一个学习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;
},
};
但这并不是传递结果数组，而只是许诺。 我在谷歌搜索中尝试过不同的方法，但没有一种方法对我有效。
谁能告诉我正确的方向吗？
您需要在useEffect函数中添加await:
useEffect(() => {
async function fetchData() {
const results = await API.get("movie/popular")
setMovies(results)
}
fetchData();
}, []);
首先，当您使用UseEffect并将属性传递给其Dependency Array，然后在UseEffect内部设置该属性时，您将在那里生成一个无限循环:
useEffect(() => {
const getData = async () => {
const res = await API.get("movie/popular");
setMovies(res);
}
getData();
}, []); //<-- remove movies
然后在使用async await和fetch时，不需要使用res.json()，只需执行以下操作:
export const API = {
get: async (url) => {
const path = BASE_API_URL + url + "?api_key=" + API_KEY;
const res = await fetch(path);
return res;
},
};
关于剩下的问题，我将很快更新
