Javascript 如何修复 Next.js 表组件中的Hydration failed错误

Js(13.4.16)我收到以下错误

*未处理的运行时错误 错误:消隐失败，因为初始用户界面与服务器上呈现的用户界面不匹配.

警告:服务器HTML应包含匹配的.

点击此处查看更多信息:https://nextjs.org/docs/messages/react-hydration-error

组件堆栈 表格 第*条 我的代码

<section className="mt-24 w-full h-full flex justify-center">
  <table className="min-w-max bg-white border border-gray-200 rounded-lg overflow-hidden">
    <thead className="bg-gray-100 text-gray-600 uppercase text-sm leading-normal ">
      <tr className="bg-gray-100 text-gray-600 uppercase text-sm leading-normal">
        <th className=" py-3 px-6 text-left">ID</th>
        <th className=" py-3 px-6 text-left">NAME</th>
        <th className=" py-3 px-6 text-left">ACTION</th>
      </tr>
    </thead>
    <tbody className=" text-gray-600 text-sm font-light">
      {data.todos.map((todo: any) => {
        <tr key={todo.id} className="border-b border-gray-200 hover:bg-gray-100">
          <td className="py-3 px-6">
            {todo.id}
          </td>
          <td className="py-3 px-6">
            {todo.name}
          </td>
          <td className="py-3 px-6">
            <button>DELETE</button>
          </td>
        </tr>
      })};
    </tbody>
  </table>
</section>

我正在学习一门课程，在视频中我看不到任何问题，也没有人能帮助我解决这个问题