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

【问题标题】：How can I use useEffect with Suspense in React?如何在 React 中将 useEffect 与 Suspense 一起使用？
【发布时间】：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 的悬念。我该如何解决这个问题？

【问题讨论】：

标签： reactjs use-effect react-suspense

【解决方案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。没事吧？
我认为这行得通
是的，它的工作，谢谢