Uncaught TypeError: Cannot read properties of null (reading 'original')

Question

在创建一个简单的训练项目时，我遇到了一个错误。

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 (react-dom.development.js:27405:1)
    at performUnitOfWork (react-dom.development.js:26513:1)
    at workLoopSync (react-dom.development.js:26422:1)

此外，如果您快速刷新页面，您可以看到发生错误的图像，并且图像链接有效。

我约会的时候是假的API

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

App.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;

Character.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;

Answer 1

对于某些字符，image 是 null。

示例： https://api.tvmaze.com/characters/15

这就是为什么你会成为

Cannot read properties of null

要修复它，您可以使用 Optional Chaining 或使用简单的 if else

检查

示例：

props.character.image?.original

Uncaught TypeError: Cannot read properties of null (reading 'original')

Uncaught TypeError: Cannot read properties of null (reading 'original')

javascript

components

fetch

reactjs