Как исправить это предупреждение, связанное с useLayoutEffect?

Я использую NextJS с Material UI и Apollo. Хотя, все работает исправно но предупреждения не идет. Мне кажется, что многие компоненты пользовательского интерфейса материала используют useLayoutEffect, о чем предупреждает React. Ошибка ниже.

Предупреждение: useLayoutEffect ничего не делает на сервере, потому что его эффект не может быть закодирован в выходной формат серверного рендерера. Это приведет к несоответствию между исходным, негидратированным пользовательским интерфейсом и предполагаемым пользовательским интерфейсом. Чтобы избежать этого, useLayoutEffect следует использовать только в компонентах, которые отрисовываются исключительно на клиенте. См. Fb.me/react-uselayouteffect-ssr для общих исправлений.


material-ui next.js react-hooks server-side-rendering react-apollo
person asifsaho    schedule 30.07.2019    source источник
comment
Покажите простейшую версию вашего кода, которая вызывает это предупреждение.   -  person Ryan Cogswell    schedule 30.07.2019
comment
Спасибо за ваш комментарий. Вопрос решен. Я скоро поделюсь решением. Короче говоря, это происходило для рендеринга на стороне сервера, и он должен сообщить Next JS.   -  person asifsaho    schedule 31.07.2019
comment
Пожалуйста, продолжайте это делать. Я столкнулся с той же проблемой   -  person Matt Coady    schedule 04.08.2019
comment
Я опубликовал решение ниже. Я надеюсь это поможет тебе   -  person asifsaho    schedule 05.08.2019

Ответы (2)


arrow_upward
4
arrow_downward

Проблема решена. Я подозревал, что это произошло с Material 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' });
person asifsaho    schedule 05.08.2019

arrow_upward
-1
arrow_downward

У меня была та же проблема с использованием шутки, энзима и пользовательского интерфейса материалов, но я не использовал Apollo. Если вы столкнулись с этой проблемой при использовании пользовательского интерфейса материала, простой способ решения проблемы - добавить в тестовый файл конфигурации (src / setupTests.js) следующее:

import React from 'react';

React.useLayoutEffect = React.useEffect;

Источники: здесь и здесь и здесь.

В противном случае, если ваш стек включает Apollo, вы можете попробовать

person Anthony    schedule 23.07.2020
comment
Пожалуйста, не делай этого. Это не решает проблему, а просто смягчает ее и, вероятно, приведет к появлению большего количества визуальных ошибок. - person Michał Miszczyszyn; 30.07.2020
comment
@MichalMiszczyszyn ОК. Вы знаете, как исправить это при тестировании компонента пользовательского интерфейса материала? Все мои тесты проходили успешно, но я получал это предупреждение повсюду. Это исправление удалило предупреждения. Не могли бы вы сказать мне, какие могут быть визуальные ошибки? - person Anthony; 01.08.2020