Estoy tratando de implementar la función de resaltado de pdf de React-pdf :
import React, { useMemo, useState } from 'react'; // import { Document, Page } from 'react-pdf'; import { Document, Page } from 'react-pdf/dist/esm/entry.webpack'; import samplePDF from './test.pdf'; // https://gist.github.com/wojtekmaj/f265f55e89ccb4ce70fbd2f8c7b1d95d function highlightPattern(text, pattern) { const splitText = text.split(pattern); if (splitText.length <= 1) { return text; } const matches = text.match(pattern); return splitText.reduce((arr, element, index) => (matches[index] ? [ ...arr, element, <mark key={index}> {matches[index]} </mark>, ] : [...arr, element]), []); } export default function Test() { const [searchText, setSearchText] = useState(''); // const textRenderer = useMemo((textItem) => { // return highlightPattern(textItem.str, searchText); // }, [searchText]); function onChange(event) { setSearchText(event.target.value); } return ( <> <Document file={samplePDF} // onLoadSuccess={onDocumentLoadSuccess} > <Page pageNumber={1} // customTextRenderer={textRenderer} /> </Document> <div> <label htmlFor="search">Search:</label> <input type="search" id="search" value={searchText} onChange={onChange} /> </div> </> ); } Tenga en cuenta que he comentado la función textRenderer . Si lo elimino (todavía se comenta el accesorio del componente de la página), la aplicación se bloquea con
TypeError: no se pueden leer las propiedades de undefined (leyendo 'str')
El motivo podría ser que el textItem es nulo o indefinido. Pero, ¿cómo puedo solucionar esto con useMemo ?