React - 未捕获的类型错误：无法读取未定义的属性

Question

几个月后，我最近重新投入到 React 中，并且一直在从事 Pokedex 方面的项目，以再次熟悉该框架。 我收到了来自 React 从 API 调用中读取未定义属性的消息。 我已经能够很好地访问其他 JSON 数据，但由于某种原因，当试图从“精灵”中提取其中一个嵌套属性时，我收到以下信息：

Uncaught TypeError: Cannot read properties of undefined (reading 'front_default')
    at PokemonPage (PokemonPage.js:30:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)

我已经能够在另一个组件中毫无问题地访问相同的信息，所以不确定我哪里出错了。 我花了一些时间在谷歌上搜索可能的解决方案，但还没有找到解决方案。

任何提示将不胜感激！

我正在使用的代码：

const PokemonPage = () => {

    const { id } = useParams();

    const [pokemonDetails, setPokemonDetails] = useState([]);


    useEffect(() => {
      axios({
        method: 'GET',
        url: `https://pokeapi.co/api/v2/pokemon/${id}`,
        params: {id: id}
      }).then(res => {
        console.log(res.data)
        setPokemonDetails(res.data)
      })
    }, []);

  return (
    <div>
          <Card.Title style={{fontSize: '15px'}}>#{pokemonDetails.id} {pokemonDetails.name}</Card.Title>
          <Card.Title style={{fontSize: '15px'}}>{pokemonDetails.base_experience}</Card.Title>
          <Card.Img variant="top" src={pokemonDetails.sprites.front_default} style={{width: '120px'}} />
  </div>
  )
}

JSON 我试图访问的数据（精灵信息）：

Answer 1

发生这种情况是因为在第一次渲染中 pokemonDetails 是一个空数组（[]），因此当您尝试访问pokemonDetails.sprites.front_default时，您正在尝试访问[].sprites.front_default ，请参见下图中的示例：

当 pokemonDetails 存在时尝试渲染。 由于它没有从响应数据中接收数组（接收对象），因此您可以将其初始化为null或undefined以比数组更有意义。

下面的示例将仅在具有数据时呈现 pokemonDetails 内容。

const PokemonPage = () => {

    const { id } = useParams();

    const [pokemonDetails, setPokemonDetails] = useState(null);


    useEffect(() => {
      axios({
        method: 'GET',
        url: `https://pokeapi.co/api/v2/pokemon/${id}`,
        params: {id: id}
      }).then(res => {
        console.log(res.data)
        setPokemonDetails(res.data)
      })
    }, []);

  return (
    <div>
          {pokemonDetails ? (<Card.Title style={{fontSize: '15px'}}>#{pokemonDetails.id} {pokemonDetails.name}</Card.Title>
          <Card.Title style={{fontSize: '15px'}}>{pokemonDetails.base_experience}</Card.Title>
          <Card.Img variant="top" src={pokemonDetails.sprites.front_default} style={{width: '120px'}} />) : <div>loading...</div>}
    </div>
  )
}

Answer 2

因为，当组件将安装您的 state 等于空数组时。 因此， [].sprites等于undefined和undefined.front_default您会遇到Cannot read properties of undefined错误

您可以将代码更改为此

<Card.Img variant="top" src={pokemonDetails?.sprites?.front_default} style={{width: '120px'}} />