Vấn đề về React-tooltip và Next.js SSR

Question

Tôi sử dụng thư viện react-tooltip trong ứng dụng Next.js của mình.

Tôi nhận thấy rằng mỗi khi tôi làm mới trang web trong khi truy cập trang sử dụng chú giải công cụ, tôi gặp lỗi:

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

Các lớp CSS khác nhau trên máy khách và trên máy chủ

Phần kỳ lạ là tôi không gặp lỗi đó khi điều hướng từ một trang ngẫu nhiên đến một trang sử dụng chú giải công cụ phản ứng.

Mã liên quan đến chú giải công cụ:

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

Answer 1

Tôi đã gặp vấn đề tương tự, tôi phải sử dụng trạng thái để phát hiện khi thành phần đã được gắn kết và chỉ hiển thị chú giải công cụ sau đó.

PS Bạn không thấy lỗi khi điều hướng, vì trang không được hiển thị trên máy chủ khi bạn điều hướng, tất cả đều là giao diện người dùng :)