如何在 React 中将 useEffect 与 Suspense 一起使用？

Posted 2023-02-21

【中文标题】如何在 React 中将 useEffect 与 Suspense 一起使用？

【英文标题】：How can I use useEffect with Suspense in React?

【发布时间】：2022-01-13 18:59:14

【问题描述】：

您好，我想在我的页面加载时自动聚焦输入。我必须使用 Suspense，因为我使用的是 i18n。我有自动对焦代码，但效果不佳。

<Suspense fallback=<LoadingScreen/>>
  <Input />
</Suspense>

const Input = () => 
  const inputRef = useRef(null);
  useEffect(() => 
    inputRef.current.focus();
  , []);
  return (
    <input ref=inputRef type="text"/>
  );
;

当我消除悬念时，我的代码运行良好。但我需要 i18n 的悬念。我该如何解决这个问题？

【参考方案1】：

你使用useCallback 而不是useEffect。

const Input = () => 
  const callbackRef = useCallback(ref => ref && ref.focus());
  return (
    <input ref=callbackRef type="text"/>
  );
;

它不起作用，因为在安装组件时调用了 useEffect，而这发生在 <Suspese /> 完成之前。

【讨论】：

同样的问题:(重新渲染时工作但刷新页面后不工作

好的，我知道问题出在哪里了，Suspense 在获取后立即开始渲染：reactjs.org/docs/… 您可以尝试使用useEffect(() => ref.current.focus(), [dataLoaded]) 进行修复，这将在您更改 dataLoaded 的状态时触发该函数

我想我可以用 redux 创建新状态，当卸载 LoadingScreen 组件时，我设置了 true pageLoaded redux 状态。当 pageLoaded 为真时，我专注于 useEffect。没事吧？

我认为这行得通

是的，它的工作，谢谢