如何修复此警告"useLayoutEffect"相关警告？

Question

我正在将nextjs与材料UI和Apollo一起使用。虽然，一切正常，但警告却没有。在我看来，许多材料UI组件都使用 USELAYOUTEFFECT ，该>由React警告。错误在下面。

警告：UseLayouteffect在服务器上什么都不做，因为它的效果无法编码到服务器渲染器的输出格式中。这将导致最初的非含量UI和预期的UI之间的不匹配。为了避免这种情况，uselayouteffect仅应用于仅在客户端呈现的组件中。有关常见修复程序，请参见fb.me/reaeact-uselayouteffect-ssr。

Answer 1

问题解决了。我怀疑它是针对材料UI发生的，但实际上是Apollo发生的。我在这里发布解决方案以让其他人知道。

在Apollo配置文件中，我需要说该应用程序正在使用服务器端渲染。请检查下面的代码。如果您不使用Typescript，则只需删除类型即可。在最后一行中，{ 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' });

Answer 2

我使用开玩笑，酶和材料UI也有相同的问题，但我没有使用Apollo。如果您使用材料UI遇到此问题，那么围绕的简单工作就是将测试配置文件(src/setuptests.js(添加到以下内容：

import React from 'react';
React.useLayoutEffect = React.useEffect;

来源：这里和这里。

否则，如果您的堆栈包括Apollo，则可以尝试