Question

我正在将NextJS与Material UI和Apollo一起使用。虽然，一切正常，但警告不会继续。在我看来，很多Material UI组件都在使用 useLayoutEffect ，这是React提出的警告。错误如下。

警告：useLayoutEffect在服务器上不执行任何操作，因为其效果无法被编码为服务器渲染器的输出格式。这将导致初始的非水化用户界面与预期的用户界面不匹配。为避免这种情况，useLayoutEffect仅应在专门在客户端上呈现的组件中使用。有关常见修补程序，请参见fb.me/react-uselayouteffect-ssr。

Answer 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' });

Answer 2

我在使用笑话，酶和Material UI时遇到了相同的问题，但是我没有使用Apollo。如果使用Material UI遇到此问题，一个简单的解决方法是将以下内容添加到测试配置文件（src / setupTests.js）：

import React from 'react';

React.useLayoutEffect = React.useEffect;

来源：here和here和here。

否则，如果您的堆栈中包含阿波罗，则可以try

如何解决此警告与“ useLayoutEffect”相关的警告？

2 个答案: