React条件渲染和Next.js水合错误

cetgtptt 于 11个月前发布在 React

关注(0)|答案(1)|浏览(109)

在正常的React中，如果你有数据在渲染时可能存在也可能不存在，你可以使用条件逻辑返回null。例如，如果你有一个useCurrentUser钩子从localstorage检索用户，并可能返回null，你可以这样写：

function SomePage() {
   const user = useCurrentUser();

   if (!user) return null;

   return <ActualPage/>;
}

字符串
然而，当我尝试在Next.js中执行该模式时，我得到了一个水合错误。
大概是因为在服务器上user是null，但在客户端（有localstorage）有一个用户，所以两者冲突。
然而，我不知道如何解决这个问题。服务器永远不会有用户，我需要处理这种可能性：

if (!user) return null;

型
但是，如果我包括条件逻辑，我会得到一个水化错误。有没有一些模式可以用来解决“数据可能/可能不存在”渲染在下一步，而不创建水化错误？

next.js

来源：https://stackoverflow.com/questions/77391790/react-conditional-rendering-and-next-js-hydration-errors

1条答案

按热度按时间

57hvy0tb1#

显然，这是本地存储特有的问题，可以通过创建useIsMounted钩子来解决：

const useIsMounted = () => {
  const [isMounted, setIsMounted] = useState(false);
  useEffect(() => {
    setIsMounted(true);
  }, []);
  return isMounted;
};

字符串
一旦你有了这个钩子，你就可以像这样在你的组件中使用它：

function SomePage() {
   const user = useCurrentUser();
   const isMounted = useIsMounted();

   if (!isMounted || !user) return null;

   return <ActualPage/>;
}

型
钩子（它是useEffect）确保我们不在服务器上渲染，解决了水化错误。

赞(0）回复(0）举报 11个月前

我来回答

React条件渲染和Next.js水合错误

1条答案

相关问题

热门标签

最新问答