在 Next.js 中使用 FullCalendar 的水化问题答案

【问题标题】：Hydration problem using FullCalendar in Next.js在 Next.js 中使用 FullCalendar 的水化问题
【发布时间】：2022-12-13 21:56:09
【问题描述】：

我已经在 React 上使用 FullCalendar 完成了一些工作（它完美地工作）然后将它应用于 Next.js 应用程序它也可以工作但是我收到关于水化的弹出错误。

有了人们遇到的问题，我无法理解它的原因是什么？

我的日历页面：

function Calendrier(){
    //
    const [content,setContent]=useState({"isOpen":false,"content":{}})
    const handleEventClick = (event: EventClickArg) => {
        setContent({
            "isOpen":true,
            "content":event
        })
    }

    //
    const getEvents = (fetchInfo:any, callback:any)=>{
        retrieveData(fetchInfo.start, fetchInfo.end,callback);
    }
    const retrieveData = async (from:Date,to:Date,callback:any)=>{
        try{
            const rdv_per_day = {
    "start": "2022-04-12T06:45:00.000Z",
    "end": "2022-04-12T12:45:00.000Z",
    "aivable": 6,
    "length": 45,
    "taken": [
      "2022-04-12T07:30:00.000Z",
      "2022-04-12T09:00:00.000Z"
    ]
    }
            callback(rdv_per_day.map((doc:any)=>{
                return (
                    {
                        start:doc.start,
                        end:doc.end,
                        title:doc.aivable+" Rdv disponible",
                        allDay:false ,                            
                        taken: doc.taken,
                        length:doc.length,
                        eventTimeFormat: {
                            hour: "2-digit",
                            minute: "2-digit",
                            hour12: false
                        }
                    }
                    
                )
                
            }))
        }catch(error){
            alert(`error retrieving event: ${error}`)    
        }
        
        
    }

    return (
        <div>
            <FullCalendar
                plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
                eventClick={handleEventClick}
                initialView="timeGridWeek"
                slotLabelFormat={{ hour: "2-digit", minute: "2-digit", hour12: false }}
                events={getEvents}
            />
        </div>
    )
}

export default Calendrier;

给定的错误是：

Unhandled Runtime Error

Error: Hydration failed because the initial UI does not match what was rendered on the server.
Call Stack
throwOnHydrationMismatch

node_modules\react-dom\cjs\react-dom.development.js (14344:0)

tryToClaimNextHydratableInstance

node_modules\react-dom\cjs\react-dom.development.js (14372:0)

updateHostComponent$1

node_modules\react-dom\cjs\react-dom.development.js (20636:0)

beginWork

node_modules\react-dom\cjs\react-dom.development.js (22373:0)

callCallback

node_modules\react-dom\cjs\react-dom.development.js (4157:0)

invokeGuardedCallbackDev

node_modules\react-dom\cjs\react-dom.development.js (4206:0)

invokeGuardedCallback

node_modules\react-dom\cjs\react-dom.development.js (4270:0)

beginWork$1

node_modules\react-dom\cjs\react-dom.development.js (27243:0)

performUnitOfWork

node_modules\react-dom\cjs\react-dom.development.js (26392:0)

workLoopSync

node_modules\react-dom\cjs\react-dom.development.js (26303:0)

renderRootSync

node_modules\react-dom\cjs\react-dom.development.js (26271:0)

performConcurrentWorkOnRoot

node_modules\react-dom\cjs\react-dom.development.js (25577:0)

workLoop

node_modules\scheduler\cjs\scheduler.development.js (266:0)

flushWork

node_modules\scheduler\cjs\scheduler.development.js (239:0)

performWorkUntilDeadline

node_modules\scheduler\cjs\scheduler.development.js (533:0)

【问题讨论】：

至少您需要edit问题向我们展示确切的错误消息和导致它的行的详细信息。还要确保您发布的代码是特定问题的minimal reproducible example。谢谢。
我已经给出了我得到的错误，如果你有带有 fullcalendar 的 Nextjs 它应该可以工作，你也应该有我的大弹出窗口和这些错误

标签： reactjs next.js fullcalendar

【解决方案1】：

所以，我最近遇到了这个水合作用错误，在我的情况下，这是因为 font-awesome 样式，所以最多时间这是一个样式错误，希望它可能有所帮助，或者您可以注释掉每一行并尝试一下

【讨论】：