Реагировать 16 предупреждение "warning.js:36 Предупреждение: не ожидал, что серверный HTML содержит <div> в <div>."

Я использую React 16 бета (реагирующее волокно) с рендерингом на стороне сервера

Что я должен понимать, что это значит?

warning.js:36 Warning: Did not expect server HTML to contain a <div> in <div>.
Источник

10 ответов

Решение

При поиске этой ошибки в коде реагирования кажется, что это происходит, когда HTML-код SSR не может быть повторно обработан.

https://github.com/facebook/react/blob/7a60a8092144e8ab2c85c6906dd4a7a5815cff1f/src/renderers/dom/fiber/ReactDOMFiberComponent.js#L1022

Таким образом, вы каким-то образом визуализируете другое дерево на клиенте и на сервере.

Источник

Просто измените экспресс-ответ от

<body>
    <div id="root">
        ${markup}
    </div>
</body>

в

<body>
    <div id="root">${markup}</div>
</body>

Удалить пробел между тегами

Источник

Это странно, но для меня проблема заключалась в том, что мое расширение менеджера паролей (LastPass) вводило некоторый HTML-код в некоторые поля ввода... Я отключил расширение, и ошибка исчезла ‍♂️

Источник

Я столкнулся с таким же предупреждением при использовании Modal в Next.js. Я работал над созданием всплывающего окна на главной странице.

Я нашел решение. Если сначала выполняется модальное состояние показа, оно выдает это предупреждение. Итак, я сделал это сначала неопределенным, после того как страница была отрисована, я установил это истиной. Код ниже.

       const [modalShow, setModalShow] = React.useState();
  useEffect(() => {
    if ( modalShow === undefined ) {
      setModalShow(true)
    }
  }, [modalShow])
Источник

У меня была эта проблема, я решил ее, где я изменил это:

      <div>
    <Header />
    {children}
</div>

к этому:

      <div>
    <Header />
    <div>{children}</div>
</div>
Источник

Я разрабатываю свой проект с помощью Next.js версии 13.4.4, и на момент входа в<input/>в моем компоненте я получал эту ошибку заголовка.

Однако, посмотрев на Dom моего браузера, я обнаружил, что автоматически добавляю<div></div>из приложения LastPass, которое представляет собой расширение для управления паролями.

введите сюда описание изображения

Я удалил расширение и смог исправить ошибку, и до сих пор все работает отлично.

Источник

Моя проблема была : Используемый кодLoadableComponentтолько для клиента, который обернул каждый из моих компонентов React в client.

Причину было трудно найти, потому что клиент и сервер отображали один и тот же HTML.

Мое решение:

  1. обновитесь доnode 16.x
  2. удалить загружаемойреактивно-загружаемый
  3. загрузить все компоненты с помощьюimport
Источник

У меня была та же ошибка: я пробовал кое-что и добавил элемент html непосредственно в корневой макет.

      return (
    <html lang="en">
      <body>
        {children}
        //was added here some html element who gives the error
      </body>
    </html>
  );
Источник

Я использую Next.js 12. В этом случае остановка сервера разработки, удаление.nextкаталог и перезапуск сервера разработки решили проблему.

Это произошло после исправления, которое я внес в некоторые стилизованные компоненты. Я предполагаю, что после исправления что-то было не так с кешем Next.js, поэтому его удаление помогло.

Источник

The placeholderнедвижимость на<input />тег также вызывает эту ошибку... даже в статическом компоненте HTML. Судя по всему, в браузере должно быть начальное состояние, вызывающее несоответствие. Думаю, я установлю это после загрузки, как глупо!

Источник
Другие вопросы по тегам