警告：没想到服务器 HTML 会在 <div> 中包含 <div>

Question

警告：没想到服务器 HTML 会在 <div> 中包含 <div>

我收到此错误，但我不知道还能做什么。

我正在使用 next.js，我的代码如下所示。

_app.js：

import '../styles/globals.scss'
import React from 'react'
import Layout from '../components/Layout'
import Head from "next/head";
import Signin from "./signin";
import Register from "./register";
import { DataProvider } from "../store/GlobalState";


function MyApp ({
                    Component,
                    pageProps
                }) {

    if (typeof window !== 'undefined') {
        if (window.location.pathname === '/signin') {
            return (
                <DataProvider>
                    <Signin/>
                </DataProvider>
            )
        } else if (window.location.pathname === '/register') {
            return (
                <DataProvider>
                    <Register/>
                </DataProvider>
            )
        }
    }
    return (
            <DataProvider>
                <Head>
                    <title>Above the Sky</title>
                </Head>
                <Layout>
                    <Component {...pageProps} />
                </Layout>
            </DataProvider>
    )
}

export default MyApp

Run Code Online (Sandbox Code Playgroud)

我这样做是因为我希望注册和登录页面与布局分开，没有任何页眉或页脚...如果您对此有任何提示，我应该如何做得更好，请告诉我... ..但这不是主要问题..

现在是 Register.js：

import Head from 'next/head'
import { useContext, useEffect, useState } from "react";
import Link from 'next/link'
import valid from '../utils/valid'
import { DataContext } from "../store/GlobalState";


const Register = () => {
    const [ mounted, setMounted ] = useState(false);
    const initialState = {
        email: '',
        password: '',
        cf_password: ''
    };
    const [ userData, setUserData ] = useState(initialState);
    const {
              email,
              password,
              cf_password
          } = userData;

    const {
              state,
              dispatch
          } = useContext(DataContext)

    const handleChangeInput = e => {
        const {
                  name,
                  value
              } = e.target
        setUserData({
            ...userData,
            [name]: value
        })
        dispatch({
            type: 'NOTIFY',
            payload: {}
        })
    }

    const handleSubmit = async e => {
        e.preventDefault()
        const errorMessage = valid(email, password, cf_password)

        if (errorMessage) {
            return dispatch({
                type: 'NOTIFY',
                payload: { error: errorMessage }
            })
        }
        dispatch({
            type: 'NOTIFY',
            payload: { success: 'Ok' }
        })
    }

    useEffect(() => {
        setMounted(true)
    }, [])


    return (
        mounted
        &&

        <div style={{
            backgroundColor: 'black',
            height: '100vh'
        }}>
            <Head>
                <title>Register Page</title>
            </Head>
            <div className="login-dark" style={{ height: "695px" }}>
                <form className='container' onSubmit={handleSubmit}>
                    <div className="illustration"><i className="fas fa-thin fa-user-plus"/></div>
                    <div className="mb-3">
                        <label htmlFor="exampleInputEmail1" className="form-label">Email address</label>
                        <input type="email" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
                               name="email" value={email} onChange={handleChangeInput}/>
                        <div id="emailHelp" className="form-text">We'll never share your email with anyone else.</div>
                    </div>
                    <div className="mb-3">
                        <label htmlFor="exampleInputPassword1" className="form-label">Password</label>
                        <input type="password" className="form-control" id="exampleInputPassword1"
                               name="password" value={password} onChange={handleChangeInput}/>
                    </div>
                    <div className="mb-3">
                        <label htmlFor="exampleInputPassword2" className="form-label">Confirm Password</label>
                        <input type="password" className="form-control" id="exampleInputPassword2"
                               name="cf_password" value={cf_password} onChange={handleChangeInput}/>
                    </div>
                    <div className='button-container'>
                        <button type="submit" className="btn btn-primary btn-block">Register</button>
                    </div>
                    <a className="forgot" href="#">Forgot your email or password?</a>
                    <p className="have-account">Already have an account ? &nbsp;&nbsp; <Link href="/signin"><a style={{ color: 'crimson' }}>Login here</a></Link></p>
                </form>
            </div>
        </div>
    )
}

export default Register

Run Code Online (Sandbox Code Playgroud)

当我渲染注册页面时，我在控制台中收到此错误..“next-dev.js?3515:32 警告：没想到服务器 HTML 会包含 in 。”

这些也是我的商店文件：

Actions.js

export const ACTIONS = {
    NOTIFY: 'NOTIFY',
    AUTH: 'AUTH'
}

Run Code Online (Sandbox Code Playgroud)

减速器.js

import { ACTIONS } from './Actions';

const reducers = (state, action) => {
    switch (action.type) {
        case ACTIONS.NOTIFY:
            return {
                ...state,
                notify: action.payload
            };
        case ACTIONS.AUTH:
            return {
                ...state,
                auth: action.payload
            };
        default:
            return state;
    }
}


export default reducers

Run Code Online (Sandbox Code Playgroud)

和 GlobalState.js

import { createContext, useReducer } from "react";
import reducers from "./Reducers";


export const DataContext = createContext()

export const DataProvider = ({ children }) => {
    const initialState = {
        notify: {},
        auth: {}
    }
    const [ state, dispatch ] = useReducer(reducers, initialState)
    const { cart, auth } = state

    return (
        <DataContext.Provider value={{
            state,
            dispatch
        }}>
            {children}
        </DataContext.Provider>
    )
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 -1

您的组件之一肯定存在服务器端渲染问题。尝试将其放在'use client'导致问题的组件页面的顶部。

如果没有，还有一个解决方案，动态导入组件，无需服务端渲染'ssr: false'。

const Component = dynamic(() => import('./component'), {
  loading: () => <p>Loading...</p>,
  ssr: false,
})

Run Code Online (Sandbox Code Playgroud)

归档时间：	4 年，3 月前
查看次数：	10635 次
最近记录：	2 年，5 月前

警告：没想到服务器 HTML 会在 &lt;div&gt; 中包含 &lt;div&gt;

警告：没想到服务器 HTML 会在 <div> 中包含 <div>