如何解决 Nextjs 中的反应水合错误

Question

我使用 WordPress REST API 创建了小型 nextjs 页面，现在react-Hydration-error错误显示此页面。我正在使用react html解析器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>
        </>
    )
}
}

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

Answer 1

我遇到了这个错误，在我的例子中，我将<p>标签嵌套在另一个<p>标签中，

我使用 Typography (MUI v5) 来渲染文本，切换到<Box>from<Typography>修复了错误。

Answer 2

您可以使用此技巧来检查组件是否已安装

  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setIsMounted(true);
  }, []);

  if (!isMounted) {
    return null;
  }

Answer 3

我们使用组件来构建基于 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>在此示例中，如果该标签在另一个标签内使用，您将收到 React Hydration Error <a>。

<a href="#">
   <Logo />
</a>

因此，不要包含相同的 HTML 标签，这些标签隐藏在组件内部，以避免发生水合作用错误。

Answer 4

就我而言，我使用的是 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，并仅在计算该值时才初始化反应选择下拉列表，现在这是我当前有效的代码：

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

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