使用React Hooks中的useEffect和useState来避免API调用无限重复渲染。

代码示例：

import React, { useState, useEffect } from "react";

function App() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    setLoading(true);

    fetch("https://example.com/api/data")
      .then(response => response.json())
      .then(data => {
        setData(data);
        setLoading(false);
      })
      .catch(error => {
        setError(error);
        setLoading(false);
      });
  }, []); //空数组作为第二个参数确保只在组件首次加载时调用API

  if (loading) {
    return 
Loading...
;
  }

  if (error) {
    return 
Error: {error.message}
;
  }

  return (
    

      {data && 
{data}
} // 如果data不为null，则渲染data
    
  );
}

export default App;

在useEffect中，我们传递了一个空数组作为第二个参数。这表明我们只有在组件首次加载时调用API。如果您需要通过更改选项来切换API调用，则可以将选项包含在数组中。当传递一个空数组时，useEffect仅在组件第一次呈现时运行。