StrictMode 导致 useState 中断

Question

StrictMode 破坏了 useEffect 内部的 useState。 如果没有 StrictMode 或在构建中，代码可以正常工作。

setIsLoading 应该将 useEffect 中的状态设置为 false。 setIsLoading(false) “会解决这个问题”，但它没有解释为什么 setIsLoading(prevState => !prevState) 将其设置回 true。这是否只是因为 StrictModes 双重渲染而发生？或者有更好的方法吗？

import { useEffect, useState } from "react";

export default function App() {
  const [isLoading, setIsLoading] = useState<boolean>(true);

  useEffect(() => {
    const getData = async () => {
      /*
        Some random code would be here
      */
      setIsLoading((prevState) => !prevState);
    };
    getData();
  }, []);

  return (
    <div className="App">
      {isLoading ? <div>Loading...</div> : <div>Data has been loaded</div>}
    </div>
  );
}

如果您想尝试一下，这里有一个codesandbox 的链接。 https://codesandbox.io/p/sandbox/bug-test-39l53k?file=%2Fsrc%2FApp.tsx

Answer 1

是的，StrictMode 是重置 isLoading 的原因，因为 useEffect 被调用了两次。

StrictMode 的作用是：

• 你的组件将重新渲染额外的时间来查找不纯渲染引起的错误。
• 您的组件将重新运行 Effects 额外的时间，以查找因缺少 Effect 清理而导致的错误。
• 将检查您的组件是否使用了已弃用的 API。

来源

因此，根据您想要执行的操作，将 isLoading 设置为 false 可以是解决问题的正确方法。