React-tooltip และ Next.js SSR

Sep 27 2020

ฉันใช้ไลบรารีคำแนะนำเครื่องมือตอบกลับในแอป Next.js ของฉัน

ฉันสังเกตเห็นว่าทุกครั้งที่ฉันรีเฟรชเว็บไซต์ในขณะที่เยี่ยมชมหน้าที่ใช้คำแนะนำเครื่องมือฉันได้รับข้อผิดพลาด:

react-dom.development.js:88 Warning: Prop `dangerouslySetInnerHTML` did not match.

คลาส CSS แตกต่างกันบนไคลเอนต์และบนเซิร์ฟเวอร์

ส่วนที่แปลกคือฉันไม่ได้รับข้อผิดพลาดนั้นในขณะที่นำทางจากเพจแบบสุ่มไปยังเพจที่ใช้คำแนะนำเครื่องมือตอบกลับ

รหัสที่เกี่ยวข้องกับคำแนะนำเครื่องมือ:

<StyledPopularityTooltipIcon src="/icons/tooltip.svg" alt="question mark" data-tip="hello world" />
<ReactTooltip
    effect="solid"
    className="tooltip"
    backgroundColor="#F0F0F0"
    arrowColor="#F0F0F0"
    clickable={true}
/>

คำตอบ

1 lemurry Oct 15 2020 at 02:17

ฉันมีปัญหาเดียวกันฉันต้องใช้สถานะเพื่อตรวจจับเมื่อส่วนประกอบได้รับการติดตั้งและแสดงคำแนะนำเครื่องมือหลังจากนั้นเท่านั้น

ป.ล. คุณไม่เห็นข้อผิดพลาดขณะนำทางเนื่องจากเพจไม่ได้แสดงบนเซิร์ฟเวอร์เมื่อคุณนำทางมันเป็นส่วนหน้าทั้งหมด :)