Как разрешить ошибку несоответствия гидратации React, чтобы донести сторонние данные, сброшенные из тега сценария? ⇐ Javascript

[Anonymous]

В редакторе CK в Drupal в Drupal в Drupal в режиме исходного режима записывается следующий сторонний код: < /p>

Код: Выделить всё

    
window.page = 'gidd';




< /code>
Теперь, в следующем компоненте React (DatabasePage), мы показываем данные сторонних сторон, что делает отличное на переднем крае: < /p>
import { graphql } from "gatsby";
import React from "react";
import { Col, Container, Row } from "react-bootstrap";
import ExtractRichText from "../../molecules/ExtractRichText";
import "./database.scss";
import Seo from "../../atoms/seo";

const DatabasePage = ({ data }) => {
return (




{/*  */}
dangerouslySetInnerHTML={{
__html: data.nodeDatabasePage.body.value,
}}
/>




);
};

export default DatabasePage;

export const pageQuery = graphql`
query ($id: String!) {
nodeDatabasePage(id: { eq: $id }) {
title
body {
value
}
field_meta_tags {
description
keywords
}
path {
alias
}
relationships {
field_metatag_image {
url
}
}
}
}
`;

export const Head = ({ data }) => (

);
< /code>
Теперь мы изменили приведенный выше компонент на следующее: < /p>
import { graphql } from "gatsby";
import React from "react";
import { Col, Container, Row } from "react-bootstrap";
import ExtractRichText from "../../molecules/ExtractRichText";
import "./database.scss";
import Seo from "../../atoms/seo";

const DatabasePage = ({ data }) => {
return (









);
};

export default DatabasePage;

export const pageQuery = graphql`
query ($id: String!) {
nodeDatabasePage(id: { eq: $id }) {
title
body {
value
}
field_meta_tags {
description
keywords
}
path {
alias
}
relationships {
field_metatag_image {
url
}
}
}
}
`;

export const Head = ({ data }) =>  (

);

Мы использовали extractrichtext компонент, который направляет анализ кода и визуализации в фронта.

Код: Выделить всё

import * as React from "react";
import parse from "html-react-parser";
import { useFileFile } from "../../hooks/useFileFile";
import { useMediaFileFile } from "../../hooks/useMediaFileFile";
import "./extractRichText.scss"
export const ExtractRichText = ({ richText, extraClasses }) => {
const drupalIDs = useFileFile().map((e) => e?.node?.drupal_id);
const allFiles = useFileFile().map((e) => e?.node);
const allMediafiles = useMediaFileFile().map((e) => e?.node);
let body = "";
if (richText) {
body = extractImage(drupalIDs, richText, extraClasses, allFiles, allMediafiles);
}
return {body};
};
function extractImage(drupalIDs, body, extraClasses, allFiles, allMediafiles) {
return parse(body, {
transform: (node) => {
if (node.type === "img" || node.type === "drupal-entity" || node.type === "drupal-media") {
const currentFile = allFiles.find((file) => node.props["data-entity-uuid"] === file?.drupal_id);
let imageUrl = currentFile?.publicUrl;
let mediaUrl;
let alt;
if (node.type === "drupal-media") {
const currentMedia = allMediafiles.find((media) => node.props["data-entity-uuid"] === media?.drupal_id);
mediaUrl = currentMedia?.relationships?.field_media_image?.publicUrl;
alt = currentMedia?.field_media_image?.alt;
}
const imgAlign = node.props["data-align"] || "";
const height = node.props["height"];
const width = node.props["width"];
let src = imageUrl || mediaUrl || node.props["src"];
if (src === node.props["src"]) {
const isRelative = !/^https?:\/\//i.test(src);
if (isRelative) {
const base = process.env.GATSBY_DRUPAL_URL.replace(/\/+$/, '');
const path = src.replace(/^\/+/, '');
src = `${base}/${path}`;
}
}
const imgStyles = {};
if (width) {
imgStyles.width = `${width}px !important`;
} else {
// imgStyles.width = `100%`;
}
if (height) {
imgStyles.height = `auto`;
} else {
// imgStyles.height = `100%`;
}
return (

[img]{`${src}`}


);
}
if (node.type === 'a' && node.props["data-entity-type"] === 'file') {
const currentFile = allFiles.find((file) =>  node.props["data-entity-uuid"] === file?.drupal_id);
const href = node.props["href"] || "";
const fallbackImage = process.env.GATSBY_DRUPAL_URL + href;
return (
[url={`${currentFile?.url || fallbackImage}`}
target={`${node.props[]{`${node.props["children"] || "Link"}`}[/url]
);
}
return node;
},
});
}
export default ExtractRichText;

Но после использования extractrichtext в DatabasePage компонент мы получаем следующие ошибки времени выполнения, а Сторонние данные не отображаются так же :

throw new Error('Text content does not match server-rendered HTML.');
throw new Error('Hydration failed because the initial UI does not match what was ' + 'rendered on the server.');
var recoverableError = createCapturedValueAtFiber(new Error('There was an error while hydrating. Because the error happened outside ' + 'of a Suspense boundary, the entire root will switch to ' + 'client rendering.'), workInProgress);
< /code>
мое предположение: < /strong> < /em>
Это происходит потому, что HTML, сгенерированный на сервере (SSR), отличается от того, что клиент рендеширует во время гидратации, и реагирует на ошибку гидратации, когда он не может восстановить их. Редактор CK в
Drupal в режиме исходного исходного.>

Подробнее здесь: https://stackoverflow.com/questions/795 ... ata-dumped