我有一个 React 应用，但无法深入了解状态。

import React, { Component } from 'react';
import { Grid} from 'react-bootstrap'
import fetch from 'isomorphic-fetch';


class Pokemon extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pokemon: {},
    }
  }

  componentDidMount() {

    fetch('https://pokeapi.co/api/v2/pokemon/150/')
      .then((response) => {
        return response.json()
      })
      .then((json) => {
        this.setState({
          pokemon: json,
         })
      })
  }

  render () {
    const { pokemon } = this.state
    console.log(pokemon.species) // works
    return (
      <Grid>
        <p>{pokemon.species.name}</p>
        <Image src={this.props.image} responsive alt='member picture' />
     </Grid>
    )
  }

}

export default Pokemon;

使用 React 开发者工具，我可以看到所有数据都处于状态中。

我可以执行

console.log(pokemon.species) 

，它返回一个具有两个属性 url 和 name 的对象。但是当我尝试

console.log(pokemon.species.name) 

它返回“TypeError：pokemon.species 未定义”

在只有 state = { pokemon: {} } 的状态下，状态看起来像这样。