Next.JS: Предупреждение Ожидаемый HTML-код сервера должен содержать соответствующий <a>в <div>;Как регидрировать? - PullRequest
Новая
       69

Next.JS: Предупреждение Ожидаемый HTML-код сервера должен содержать соответствующий <a>в <div>;Как регидрировать?

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

Я использую Semantic-UI React и Next.JS, но он появляется на точке останова <768px, мой компонент Home полностью ломается при обновлении браузера. Я знаю, потому что это приложение реагирует на следующее: они заботятся о маршрутизации, но я думаю, мне было интересно, что, если пользователь это сделает? </p>

Это не происходит в моем / login, / registerили / профильные маршруты

Итак, я решил проверить свою проблему - Здесь , и в этом посте он указывает на React docs ;объяснение, почему это происходит, и рецепт для его решения, похоже, не подходит для моего случая.

То же, что и render (), но используется для гидратации контейнера, содержимое HTML которого было визуализированоReactDOMServer. React попытается присоединить прослушиватели событий к существующей разметке.

React ожидает, что отображаемое содержимое идентично между сервером и клиентом. Он может исправлять различия в текстовом содержимом, но вы должны рассматривать несоответствия как ошибки и исправлять их. В режиме разработки React предупреждает о несоответствиях во время гидратации. Нет никаких гарантий, что различия в атрибутах будут исправлены в случае несоответствия. Это важно по соображениям производительности, поскольку в большинстве приложений несоответствия встречаются редко, и поэтому проверка всей разметки будет непомерно дорогой.

Если атрибут отдельного элемента или текстовое содержимое неизбежно отличается между сервером и клиентом (дляНапример, отметка времени), вы можете отключить предупреждение, добавив к элементу suppressHydrationWarning = {true}. Он работает только на один уровень глубиной и предназначен для спасательного люка. Не злоупотребляйте этим. Если это не текстовый контент, React по-прежнему не будет пытаться его исправить, поэтому он может оставаться непоследовательным до будущих обновлений.

Если вам намеренно нужно отобразить что-то другое на сервере и клиенте, вы можете выполнитьдвухпроходный рендеринг. Компоненты, которые визуализируют что-то другое на клиенте, могут читать переменную состояния, например this.state.isClient, для которой вы можете установить значение true в componentDidMount (). Таким образом, начальный этап рендеринга будет отображать тот же контент, что и сервер, избегая несоответствий, но дополнительный этап будет происходить синхронно сразу после гидратации.

Это файл точки входа: pages/index

import React from 'react'
import Head from '../components/head'
import HomeLayout from '../components/Home/Home.jsx'
import 'semantic-ui-css/semantic.min.css'
import '../styles/styles.scss'
import { connect } from 'react-redux'

// import {bindActionCreators} from 'redux'
// import withRedux from 'next-redux-wrapper'
import { logInUser } from '../store'


class Home extends React.Component {
    static async getInitialProps({ isLoggedIn }) {
        return { isLoggedIn }
    }


    render() {
        const { isLoggedIn } = this.props
        return (
        <div>
        {console.log("isLoggedIn ", isLoggedIn)}
           <Head title = 'Home' />
           <HomeLayout isLoggedIn = { isLoggedIn }/>
        </div>
        )
    }
}




export default connect(state => state)(Home);

А это моя pages/_app

import React from 'react'
import { Provider } from 'react-redux'
import App from 'next/app'
import withRedux from 'next-redux-wrapper'
import { initializeStore } from '../store'

export default withRedux(initializeStore)(
 class MyApp extends App {
  static async getInitialProps({ Component, ctx }) {
   return {
    pageProps: Component.getInitialProps
     ? await Component.getInitialProps(ctx)
     : {}
   }
  }

  render() {
   const { Component, pageProps, store } = this.props
   return (
    <Provider store={store}>
     <Component {...pageProps} />
    </Provider>
   )
  }
 }
)

Любая помощь

...