next.js 如何解决Nextjs中的React水合错误

ki0zmccv 于 2022-11-05 发布在 React

关注(0)|答案(4)|浏览(244)

我创建了一个小的nextjs页面使用WordPress的REST API，现在react-hydration-error错误显示此页面。我正在使用ReactHTML解析器npm。我如何解决这个错误。你可以请解决这个错误。
我代码：

import Image from 'next/image'
import React ,{Component}from 'react'
import Link from 'next/link';
import { BiCalendar } from "react-icons/bi";
import ReactHtmlParser from 'react-html-parser'; 

export default class Blog extends Component{
    constructor(props){
        super(props);
        this.state={
        data: props.bloglist,
        isLoading: true,
        dataLoaded: false,
        };

    }
render(){
    if (!this.state.data) {
        return null;
      }
    console.log(this.state.data)
    return( 
        <>
        <div className="container blog-section">
            <div className='row'>
                <h2>Latest Posts</h2>
            </div>
            <div className='row'>
                {
                    this.state.data.map(((x,i) =>(
                        <div className='col-md-4 boxs text-center' key={i}>

                            <div className='bg-info'>
                            <img src={x.images.large} className='img-fluid'/>
                            <h3>{x.title.rendered} </h3>
                            <p className='shopping'><span><BiCalendar/> {x.date}</span> </p>
                            {/* <p dangerouslySetInnerHTML={{__html: x.excerpt.rendered}}></p><span><BiShoppingBag/> {x.slug}</span> */}
                            <p class='expert'>{ReactHtmlParser(x.excerpt.rendered)}</p>
                            <Link href={"/blog"+"/"+x.slug+"/"+x.id } passHref={true}><p className='readmore'><span>Readmore </span></p></Link>
                        </div>
                        </div>
                    )))
                }
            </div>
        </div>
        </>
    )
}
}

我的原始问题：来自API的<p>If you have heard that there are ways to make money while shopping in the UAE and would lik</p>的段落，所以我转换为html.

next.js

来源：https://stackoverflow.com/questions/73162551/how-to-solve-react-hydration-error-in-nextjs

4条答案

按热度按时间

sxissh061#

在我的情况下，我使用NextJS和我有一个下拉菜单与react-select，默认值是变化后，一个小的计算，这不像nextjs，这是我以前的代码：

<Select options={seasons}
          onChange={() => setSeason(e.value)}
          defaultValue={seasons.find((x) => x.value == season) ? seasons.find((x) => x.value == season) : seasons[0]}
  />

因此，我将计算改为useEffect，并仅在计算该值时初始化react-select下拉列表，现在这是我当前的代码：

{defaultSeason && (<Select options={seasons}
        onChange={() => setSeason(e.value)}
        defaultValue={defaultSeason}
/>)}

因此，基本上检查defaultValue或其他任何内容在html发送到NextJS中的客户端部分后是否没有更改。

赞(0）回复(0）举报 2022-11-05

gkl3eglg2#

我们使用组件来构建基于React的网站，这些组件是使用HTML标记制作的。不要嵌套相同的HTML元素是非常重要的。
例如：

function Logo() {
  return (
    <Link href="/">
      <a>
        <Image
          src="/images/logo.svg"
          width={100}
          height={75}
        />
     </a>
   </Link>
  );
}

export default Logo;

以上是内部已包含<a></a>标记的徽标组件。
在本例中，如果在另一个<a>标记内使用<a>标记，则会出现React水合错误。