从对象数组中获取数据时的水合错误

Question

我正在使用nextjs，并且有一个侧边栏，我试图从一系列对象中获取5个帖子。定义的功能正常工作并显示5个帖子，但是我遇到了一个水合错误，显示prop alt与不匹配。当我尝试在控制台上显示它时，alt值不同。

import Link from 'next/link';
import Image from 'next/image';
import { BlogData } from '../data/blogdata';


function getMultipleRandom() {
        const shuffled = [...BlogData].sort(() => 0.5 - Math.random());

        return shuffled.slice(0, 5);
    }

const Sidebar = () => {

    return (
        <>
            <h2 className='font-roboto text-3xl font-semibold pb-10'>Featured Posts</h2>

            {
                
                getMultipleRandom().map((val) => {
                    
                    return (

                        <div key={val._id} className='flex flex-col pt-5'>
                            <div className='w-56 pr-5'><Image src={val.featuredImage} alt={val.alt} width={1200} height={800} className=' rounded-3xl' /></div>
                            <Link href={`/blog/${val.slug}`}><a><h3 className='text-sm font-poppins font-medium hover:text-[#5836ed] transition-all duration-300'>{val.title}</h3></a></Link>
                        </div>
                    );
                })
            }

        </>

    )
}

export default Sidebar;

Answer 1

尝试此代码：

import Link from "next/link";
import Image from "next/image";
import { BlogData } from "../data/blogdata";
import { useEffect, useState } from "react";

const Sidebar = () => {
  const [shuffled, setShuffled] = useState([]);
  const [loading, setLoading] = useState(true); // anyting you want !!!

  useEffect(() => {
    if (loading) {
      const x = [...BlogData].sort(() => 0.5 - Math.random());
      setShuffled(x.slice(0, 5));
      setLoading(false);
    }
  }, [loading]);

  return (
    <>
      <h2 className="font-roboto text-3xl font-semibold pb-10">
        Featured Posts
      </h2>

      {loading ? <div>loading ... </div> : shuffled.map((val) => {
        return (
          <div key={val._id} className="flex flex-col pt-5">
            <div className="w-56 pr-5">
              <Image
                src={val.featuredImage}
                alt={val.alt}
                width={1200}
                height={800}
                className=" rounded-3xl"
              />
            </div>
            <Link href={`/blog/${val.slug}`}>
              <a>
                <h3 className="text-sm font-poppins font-medium hover:text-[#5836ed] transition-all duration-300">
                  {val.title}
                </h3>
              </a>
            </Link>
          </div>
        );
      })}
    </>
  );
};

export default Sidebar;