Sigo encontrándome con este error, el código funciona bien en reacción simple, pero en mecanografiado sigue arrojando este error "El objeto es posiblemente nulo". Intenté contrarrestarlo usando "!" pero no ayudó.

el segundo error en el registro dice "no se pueden leer las propiedades de lectura nula (textContent) "

Configuré esto en falso

 "strictNullChecks": false,

Aquí hay una caja de arena: https://codesandbox.io/s/sweet-mclean-nrhcdq?file=/src/App.tsx

Esta es la llamada de obtención de la API:

 const [isLoading, setLoading] = useState(false); //storing data const [data, setData] = useState(false); //fetching data useEffect(() => { setLoading(true); const fetchList = async (): Promise<UsersList> => { const result: any = await fetch("https://randomuser.me/api/?results=20") .then((res) => res.json()) .then((data) => { setData(data); setLoading(false); console.log(data); }); return result; }; fetchList(); }, []);

Este es el código que me está causando el problema, ¿hay una mejor manera de hacerlo? alguien mencionó useref pero no estoy seguro de cómo implementarlo con una llamada de búsqueda en useEffect.

El resultado deseado es que cualquier texto que incluya Miss tenga un fondo azul.

 const h2 = window.document.getElementById("person")! h2.innerHTML = h2.textContent!.replace(/[Miss]/g, "<span class='title'>Miss</span>"); .title { background-color: blue; }

Más adelante en el html he filtrado y mapeado a través de los datos:

 <div style={hoverStyle} className="grid grid-cols-4 gap-2 p-2 mt-20"> {data?.results.filter((val: any)=>{ if (searchUser === "") { return val } else if (val.name.first.toLowerCase().includes(searchUser.toLowerCase())) { return val } else if (val.email.toLowerCase().includes(searchUser.toLowerCase())){ return val } else if (val.location.city.toLowerCase().includes(searchUser.toLowerCase())){ return val } }).map((d: any) => ( <div style={hoverStyle} className=" ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300 border-white shadow-slate-500 bg-white hover:opacity-95 rounded-lg container p-5"> <img className="rounded-full w-44 h-44 " src={d.picture.large} /> <h2 id="person" >{d.name.title}</h2>

¿Algunas ideas?