javascript - 无法找到水合错误 : Initial UI does not match what was rendered

Question

我已经查看这段代码超过 2 天了，但我无法找到我的 Hydration 错误。这让我发疯。有人可以帮我看一下吗？是否有任何提示和技巧可以更快地发现此类错误，我很想知道!

我正在使用 nextjs 并使用 axios 来获取请求

以下是错误: 错误:水合失败，因为初始 UI 与服务器上呈现的内容不匹配。

错误:补水时出现错误。由于错误发生在 Suspense 边界之外，因此整个根将切换到客户端渲染。

react-dom.development.js?ac89:19849 未捕获错误:补水时出现错误。由于错误发生在 Suspense 边界之外，因此整个根将切换到客户端渲染。

  export async function getStaticProps() {
    try {
      const res = await axios.get('https://open.data.amsterdam.nl/Festivals.json')
      const events = res.data;
      return {
        props: {
          events: events.slice(0, 10)
        }
      } 
    } catch (error) {
      console.log(error)
    }
  }
  


function EventsCards({events}) {

  return (
    <div>
      <a id="pressable-card max-w-md">
        <div id="featured-event-container" className="bg-black rounded-md bg-opacity-20 bg-blur-sm max-w-xs shadow-lg">
          <div id="event-banner">
            <img className="max-w-lg w-full h-full" src={events.media[0].url }/>
          </div>
          <div className="text-white pl-2">
            <h1 className="text-lg font-medium text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600">{events.title}</h1>
            <a className="text-sm uppercase">{events.title}</a>
            <a className="text-xs text-">Friday 20 Jan | 13:00 - 02:00</a>
          </div>
          <div className="py-2 px-2">
            <p className="text-slate-200 font-normal border-[1px] py-[2px] px-[4px] rounded-lg border-slate-400 w-8 text-[8px]">Techno</p>
          </div>
        </div>
      </a>
    </div>
  )
}
function Events({events}) {

  return (
      <div className="bg-gradient-to-t from-gray-500 to-gray-900 h-full bg-blur-sm pt-2">
        <div className="max-w-6xl mx-auto">
          <div className="px-8 ">
            <div className="flex">
              <h1 className="text-white font-regular opacity-100 tracking-wider sm:text-xl md:text-2xl">Featured events in Amsterdam</h1>
              <div className="pl-2 my-auto">
                <img className="rounded-full w-8 h-8 md:w-6 md:h-6  border-gray-400" src="https://www.fotw.info/images/n/nl.gif"></img>
              </div>
            </div>
            <ul className="grid grid-cols-1 md:grid-cols-2 pt-4 md:w-full">
              
              <div id="featured-wrapper" className="bg-black rounded-md bg-opacity-20 bg-blur-sm max-w-xs shadow-lg">
                <a id="pressable-card max-w-md">
                  <div id="featured-event-container">
                    <div id="event-banner">
                      <img className="max-w-lg max-h-lg w-full h-full" src='https://d1as2iufift1z3.cloudfront.net/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaWpqIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--696c8f363a91d0501e8ae333fc9d42e5fd9c225f/ERT_HOLLAND_SIGNUP_banner%20(1).jpg?proxy=true'></img>
                    </div>
                    <div className="text-white pl-2">
                      <h1 className="text-lg font-medium text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600">El Row Town 2022 - Holland</h1>
                      <a className="text-sm uppercase">{events.title}</a>
                      <a className="text-xs text-">Friday 1 Jan | 11:00 - 04:00</a>
                    </div>
                    <div className="py-2 px-2">
                      <a className="text-slate-200 font-normal border-[1px] py-[2px] px-[4px] rounded-lg border-slate-400 w-8 text-[8px]">Techno</a>
                    </div>
                  </div>
                </a>
              </div>
              <div className="text-red-400"><h1>test</h1></div>
            </ul>
          </div>
          {/* Amsterdam Events */}
          <div className="flex justify-center py-8">
            <button className="text-[8px] uppercase font-medium rounded-md py-[8px] px-2 bg-white">see events in Amsterdam</button>
          </div>
          {/* All Events */}
          <div className="mx-auto max-w-6xl w-full">
            <h1 className="px-8 text-white font-regular tracking-wider text-xl md:text-2xl">Amsterdam</h1>
          </div>
          <div className="max-auto max-w-6xl">
            <div className="grid grid-cols-1 md:grid-cols-3 pt-4 md:w-full w-full px-8 gap-4">
              {events.map((event) => (
                <EventsCards key={event.id} events={event} />
              ))}
            </div>
          </div>

        </div>
      </div>

  )
}
export default Events;```

Answer 1

您的代码有几个问题导致了问题:

1. 标记无效( anchor 标记位于其他 anchor 标记内、没有 li 子项的 ul 标记)。
2. 您正在传递 Prop events给您<EventCard />组件(它的名称应该与服务器端检索到的事件数组不同)
3. 您正在使用 event.id当不存在时为您的关键 Prop (应该是 event.trcid )。

这是组件的基本工作版本:

export default function Events({ events }) {
  return (
    <>
      {events.map((event) => (
        <EventsCards key={event.trcid} event={event} />
      ))}
    </>
  );
}

function EventsCards({ event }) {
  return <div>{event.title}</div>;
}

export async function getStaticProps() {
  try {
    const res = await axios.get(
      'https://open.data.amsterdam.nl/Festivals.json'
    );
    const events = res.data;
    return {
      props: {
        events,
      },
    };
  } catch (error) {
    console.log(error);
  }
}

更常见的是，最好首先获取页面上的数据，然后添加其他内容和样式。