开发者问题收集

React - 未捕获的 TypeError：无法读取未定义的属性

2022-09-26
187
javascript reactjs

几个月后，我最近重新开始使用 React，并一直在从事 Pokedex 副项目，以便再次熟悉该框架。我收到了来自 React 的这条消息，它从 API 调用中读取了未定义的属性。我可以正常访问其他 JSON 数据，但出于某种原因，当尝试从“sprites”中提取其中一个嵌套属性时，我收到了以下信息： 

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 数据（精灵信息）：

2个回答

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

Example

尝试在 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>
  )
}
Briuor
2022-09-26

因为，当组件挂载时，您的状态等于空数组。因此， [].sprites 等于 undefined 和 undefined.front_default ，您会遇到错误 无法读取未定义的属性

您可以将代码更改为此 

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