StrictMode在useEffect内中断useState. 在没有StrictMode或构建的情况下,代码运行良好.

SetIsLoding应在useEffect中将状态设置为False. SetIsLoding(FALSE)"可以解决这个问题",但它不能解释为什么setIsLoding(PremState=>!PremState)会将其设置回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,如果你想try 一下. https://codesandbox.io/p/sandbox/bug-test-39l53k?file=%2Fsrc%2FApp.tsx

推荐答案

是的,因为useEffect被调用了两次,所以你的isLoding就是被重置的原因.

ThreatMode所做的是:

  • 您的组件将重新渲染额外的时间来查找由不纯渲染引起的错误.
  • 您的组件将重新运行效果额外的时间来查找因缺少效果清理而导致的错误.
  • 将判断您的组件是否使用了过时的API.

Source

因此,根据您想要做的事情,将isLoding设置为False可能是解决问题的正确方法.

Reactjs相关问答推荐

过滤对象数组并通过迭代对象数组将属性放入新数组

使用setInterval判断数据的时间,然后在过期后从对象中删除;遇到性能问题

Redux向后端发送请求时出现钩子问题

TypeError:b不是React.js中的函数错误

React useEffect 问题...异步函数内的变量正在获取延迟的更新值

React redux 工具包 useGetFilterProductsQuery 和 useGetFilterProductsByCategoriesQuery 未定义为函数

React-router动态路径

Redux 工具包不更新状态

useRef 不关注模态

我可以在加载器函数中多次 fetch() 并使用一次 useloaderdata() 提取它吗?

如何更新redux状态存在的输入框

Firebase查询返回随机用户数据,而不是过滤后的用户数据

onChange in useEffect 的最佳实践

Stripe Checkout:是否可以创建不自动续订的订阅?

如何初始化 redux 全局存储 preloadedState

React v6 中的公共和私有路由

react-router v6 中的 BrowserRouter 和 createBrowserRouter 有什么区别?我可以在不使用数据 API 的情况下使用 createBrowserRouter 吗?

将 useState 设置为组件内部的值

如何使用 React 更改 Material UI 中 ButtonGroup 的 colored颜色 ?

axios post方法中的请求失败,状态码为500错误