我正在将NextJS与Material UI和Apollo一起使用。虽然,一切正常,但警告不会继续。在我看来,很多Material UI组件都在使用 useLayoutEffect ,这是React提出的警告。错误如下。
警告:useLayoutEffect在服务器上不执行任何操作,因为其效果无法被编码为服务器渲染器的输出格式。这将导致初始的非水化用户界面与预期的用户界面不匹配。为避免这种情况,useLayoutEffect仅应在专门在客户端上呈现的组件中使用。有关常见修补程序,请参见fb.me/react-uselayouteffect-ssr。
答案 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)