如何修复此警告“useLayoutEffect”相关警告？答案

【问题标题】：How to fix this warning "useLayoutEffect" related warning?如何修复此警告“useLayoutEffect”相关警告？
【发布时间】：2019-12-07 16:05:22
【问题描述】：

我正在使用带有 Material UI 和 Apollo 的 NextJS。虽然，一切正常，但警告没有发生。在我看来，很多 Material UI 组件都在使用 React 警告过的 useLayoutEffect。错误如下。

警告：useLayoutEffect 在服务器上什么都不做，因为它的效果不能被编码到服务器渲染器的输出格式中。这将导致初始的非水合 UI 和预期的 UI 不匹配。为避免这种情况，useLayoutEffect 应仅在仅在客户端上呈现的组件中使用。有关常见修复，请参阅 fb.me/react-uselayouteffect-ssr。

【问题讨论】：

请显示触发此警告的最简单代码版本。
感谢您的评论。问题已解决。我会尽快分享解决方案。简而言之，它发生在服务器端渲染中，它需要告诉 Next JS。
请跟进。我遇到了完全相同的问题
我已经在下面发布了解决方案。希望对你有帮助

标签： material-ui react-hooks next.js react-apollo server-side-rendering

【解决方案1】：

问题解决了。我怀疑它发生在 Material UI 上，但它实际上发生在 Apollo 上。我在这里发布解决方案让其他人知道。

在 Apollo 配置文件中，我需要说明应用程序正在使用服务器端渲染。请检查下面的代码。如果您不使用 TypeScript，则只需删除 Types。在最后一行 { getDataFromTree: 'ssr' } 对象解决了这个问题。希望对你有帮助。

import { InMemoryCache } from 'apollo-cache-inmemory';
import ApolloClient from 'apollo-client';
import { createHttpLink } from 'apollo-link-http';
import withApollo from 'next-with-apollo';

type Props = {
  ctx?: {};
  headers?: {};
  initialState?: {};
};

const createClient = ({ ctx, headers, initialState }: Props) =>
  new ApolloClient({
    cache: new InMemoryCache().restore(initialState || {}),
    link: createHttpLink({ uri: process.env.API_ENDPOINT })
  });

export default withApollo(createClient, { getDataFromTree: 'ssr' });

【讨论】：

【解决方案2】：

我在使用 jest、enzyme 和 Material UI 时遇到了同样的问题，但我没有使用 Apollo。如果您在使用 Material UI 时遇到此问题，一个简单的解决方法是在您的测试配置文件 (src/setupTests.js) 中添加以下内容：

import React from 'react';

React.useLayoutEffect = React.useEffect;

来源：here 和 here 和 here。

否则，如果您的堆栈包含 Apollo，您可以 try

【讨论】：

请不要这样做。它不能解决问题，它只是缓解它，并且可能会导致出现更多视觉错误。
@MichalMiszczyszyn 好的。你知道在测试 Material UI 组件时如何解决这个问题吗？我的测试都通过了，但我到处都收到了这个警告。此修复程序消除了警告。你能告诉我视觉错误可能是什么吗？