next.js 无法定位水合错误：初始UI与呈现的UI不匹配

wgeznvg7 于 2022-11-23 发布在其他

关注(0)|答案(2)|浏览(263)

我一直在看这段代码超过2天了，我还没有能够找到我的水化错误。这是把我逼疯了。有人可能会看看我吗？有什么提示和技巧，以发现这种错误更快，很想知道！
我将使用nextjs和axios执行get请求
错误如下：错误：水合失败，因为初始UI与服务器上呈现的UI不匹配。

错误：水合时出错。由于错误发生在暂挂边界之外，因此整个根将切换到客户端呈现。
react-dom.development.js？ac 89：19849未捕获的错误：水合时出错。由于错误发生在暂停边界之外，因此整个根将切换到客户端呈现。

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;```

next.js

来源：https://stackoverflow.com/questions/74352910/not-able-to-locate-hydration-error-initial-ui-does-not-match-what-was-rendered

2条答案

按热度按时间

z0qdvdin1#

您的程式码有几个问题会造成问题：
1.无效的标示（锚标签位于其他anchor标签内，ul标签没有li子系）。
1.您正在将属性events传递给您的<EventCard />组件（它的名称应该与服务器端检索到的事件数组不同）
1.您正在使用event.id作为您的关键属性，而不存在任何关键属性（它应该是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);
  }
}

通常，最好从获取页面上的数据开始，然后添加其他内容和样式。

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

vof42yt12#

这是因为您在服务器端进行了一些更改，并在快速刷新完成之前保存了这些更改，从而导致水合错误。您可以在完成保存更改后手动重新加载该页，或者等待快速刷新完成，然后保存代码。

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