Al crear un proyecto de capacitación simple, me aparece un error.

 Uncaught TypeError: Cannot read properties of null (reading 'original') at Character (Character.js:7:1) at renderWithHooks (react-dom.development.js:16175:1) at mountIndeterminateComponent (react-dom.development.js:20913:1) at beginWork (react-dom.development.js:22416:1) at HTMLUnknownElement.callCallback (react-dom.development.js:4161:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:4210:1) at invokeGuardedCallback (react-dom.development.js:4274:1) at beginWork$1 (react-dom.development.js:27405:1) at performUnitOfWork (react-dom.development.js:26513:1) at workLoopSync (react-dom.development.js:26422:1)

Además, si actualiza rápidamente la página, puede ver las imágenes con las que se produce el error y los enlaces a las imágenes funcionan.

API falsa cuando tomé la fecha

https://api.tvmaze.com/personajes/1

Aplicación.js

 import React from "react"; import { useEffect } from "react"; import { useState } from "react"; import Character from "./components/Character"; function App() { const [characters, setCharacters] = useState([]); useEffect(() => { for (let i = 1; i <= 100; i++) { characterFetch(i); } }, []); async function characterFetch(id) { fetch("https://api.tvmaze.com/characters/" + id) .then((response) => response.json()) .then((json) => setCharacters((lastcharacters) => [...lastcharacters, json]) ); } return ( <div className="App"> {characters.map((character) => { return <Character character={character} key={character.id} />; })} </div> ); } export default App;

Carácter.js

 import React from "react"; const Character = (props) => { if (props.character.name !== "Not Found") { var construct = ( <> <img src={props.character.image.original} alt="Character_photo" /> //error <div> {props.character.id} </div> <div>{props.character.name}</div> </> ); } return <div>{construct}</div>; }; export default Character;