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

时间:2019-07-30 09:40:10

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

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

  

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

2 个答案:

答案 0 :(得分:4)

问题已解决。我怀疑它是在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' });

答案 1 :(得分:-1)

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

import React from 'react';

React.useLayoutEffect = React.useEffect;

来源:hereherehere

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