ReactJS REST API 撥打電話兩次

Question

我已經測試了這個代碼 React Rest 服務代碼。 當我打開頁面時，我看到它對 REST 服務器進行了兩次調用。

調用服務器的代碼 API

export const App = (): React.FC<user[]> => {
  const [user, setUser] = useState<user | undefined>();
  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((response) => response.json())
      .then((json) => setUser(json));
  }, []);

這是完整的非批評性：

https://cynoteck.com/blog-post/how-to-call-web-api-with-useeffect-hook-in-react-typescript/#What_is_a_RESTful_API

我還用我的本地機器REST服務對此進行了測試，它進行了兩次調用。

我可以知道如何防止這個重復的請求嗎？

附加瀏覽器圖像

Answer 1

這是在 React 版本 18 中添加的新行為，它只發生在開發中，並且在使用嚴格模式時，它不會發生在生產中，

我認為他們添加了這種行為（在第一次渲染時安裝和卸載組件兩次），以捕獲一些錯誤（當不清理您在 useEffect 上放置的某些訂閱時）。