React组件API反复调用问题求助（附代码示例）

问题原因 #

• useCallback未配置依赖数组：你用useCallback包裹了fetchMoviesHandler但没传依赖数组，导致组件每次渲染时都会生成一个新的函数引用。
• useEffect依赖不稳定的函数：useEffect的依赖数组里包含fetchMoviesHandler，每次函数引用更新，useEffect就会重新执行，触发API调用，形成循环调用。

修复后的代码 #

const [loading, setloading] = useState(false);
const [movielist, setmovielist] = useState([]);
const [err, seterr] = useState("");

const fetchMoviesHandler = useCallback(async () => {
  setloading(true);
  try {
    const response = await fetch("https://swapi.dev/api/films");
    if (response.status !== 200) {
      seterr("请求出错");
    }
    const data = await response.json();
    const result = data.results;
    setmovielist(result);
  } catch (errr) {
    seterr(errr.message || "请求失败");
  } finally {
    setloading(false);
  }
}, []); // 空依赖数组确保函数仅在组件挂载时创建一次

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

return (
  <div>
    {movielist.map((movie) => {
      return <Movie key={movie.episode_id} title={movie.title} />;
    })}
  </div>
);

额外优化说明 #

• 给useCallback添加空依赖数组，让函数引用保持稳定，避免不必要的重新创建。
• 在finally块中关闭加载状态，确保请求无论成功或失败，loading状态都会被重置。
• 修正了变量拼写错误：reponse改为response。
• 完善了错误捕获逻辑，将错误信息设置到状态中，便于排查问题。

内容的提问来源于stack exchange，提问作者J_dev