Tengo texto de mi Prismic CMS, donde quiero aplicar 'palabras dinámicas'. Las palabras dinámicas son palabras del CMS, que tienen una imagen vinculada, por lo que si un texto contiene una palabra dinámica, lo cambia a un intervalo con atributos de datos, por lo que aparece un subrayado debajo de cada palabra dinámica, y si hace clic en él , aparece la imagen de la derecha.

En mi código, obtengo el HTML interno del bloque de texto, con el procesamiento prismático y todas las etiquetas dentro de él, y luego quiero cambiar el HTML interno, para aplicar las palabras dinámicas al texto y luego cambiar el HTML interno del texto. bloque al html con las palabras dinámicas.

Pero tengo algunos problemas, mi componente React se procesa dos veces, por lo que cuando se procesa por primera vez y registro newText en la consola, es el correcto. Pero en la segunda representación, también cambia los atributos de datos de la extensión dinámica de palabras, por lo que todo el html se está arruinando.

¿Alguien sabe por qué se ejecuta dos veces, o tal vez tiene una mejor solución para solucionar mi problema?

 export const ArticleBodyText = ({ text, dynamic_words }) => { useEffect(() => { const textblocks = document.querySelectorAll('#textblock p'); textblocks.forEach(item => { const textblock = item.innerHTML; const newText = setDynamicWords(textblock, dynamic_words); console.log(newText); item.innerHTML = newText; }); }, [dynamic_words]); return ( <TextBlock id="textblock"> <RichText render={text} /> </TextBlock> ); };