Что происходит, когда я получаю опасно SetInnerHTML предупреждение и пустой контент, используя Next.js? - PullRequest
Новая
       37

Что происходит, когда я получаю опасно SetInnerHTML предупреждение и пустой контент, используя Next.js?

2 голосов
/ 07 октября 2019

Во-первых, я знаю, что я не должен вкладывать <p> теги.

Итак, я создал приложение Next.js, и у меня есть компонент, который устанавливает формат html для расширенного текста какследует: 

    <Typography
      dangerouslySetInnerHTML={{
        __html: richText
      }}
    />

Реактивный компонент Typography - это всего лишь тег p в конце, поэтому его можно просто записать как: 

    <p
      dangerouslySetInnerHTML={{
        __html: richText
      }}
    />

Поэтому, когда браузер загружаетстраница, мое содержимое не отображается, и у меня появляется предупреждение консоли: 

Warning: Prop 'dangerouslySetInnerHTML' did not match. Server: "" Client: "<p>...</p>"

После продолжительного сеанса отладки во время очистки использование <span> вместо <p> было решением 

    <span
      dangerouslySetInnerHTML={{
        __html: richText
      }}
    />

Вложенные теги p были ошибкой, независимо от того, что происходит, из-за чего Next.js не отображает этот конкретный контент, что приводит к пустой строке Server: ""? Просто Next.js очень чувствителен к ошибкам и предупреждениям?

1 Ответ

0 голосов
/ 07 октября 2019

Зависит от того, откуда richText. Возможно ли, что при рендеринге на стороне сервера richText = "", а затем вы делаете какой-то API-запрос во внешнем интерфейсе, который устанавливает значение richText?

...