Material ui “如何修复此警告”；“使用布局效果”；相关警告？

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

警告：useLayoutEffect在服务器上不起任何作用，因为其效果无法编码到服务器渲染器的输出格式中。这将导致初始非水合UI和预期UI之间的不匹配。为了避免这种情况，useLayoutEffect应该只在客户端上以独占方式呈现的组件中使用。请参阅fb.me/react-uselayouteffect-ssr了解常见修复

---

问题解决了。我怀疑它发生在物质用户界面上，但实际上它发生在阿波罗上。我在这里发布解决方案，让其他人知道

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

---

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

从“React”导入React；
React.useLayoutEffect=React.useffect；

资料来源：和

---

否则，如果堆栈中包含Apollo，则可以

显示触发此警告的最简单代码版本。感谢您的评论。这个问题已经解决了。我将很快分享解决方案。简而言之，服务器端渲染发生了这种情况，需要告诉下一个JS。请继续。我遇到了与我在下面发布的解决方案完全相同的问题。我希望这对你有帮助。请不要这样做。它并不能解决问题，只是缓解了问题，可能会导致更多的视觉缺陷出现。@MichalMiszczyszyn OK。您知道在测试Material UI组件时如何解决此问题吗？我的考试都通过了，但我到处都受到警告。此修复程序删除了警告。你能告诉我什么是视觉缺陷吗？