React：无法从状态获取属性

Question

我有一个反应应用程序，但很难深入了解状态。

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 Developer Tools，我可以看到所有数据都处于状态。

我可以表演

console.log(pokemon.species) 

它返回一个具有两个属性 url 和 name 的对象。然而当我尝试时

console.log(pokemon.species.name) 

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

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

Answer 1

看起来在 API 响应之前您没有 pokemon.species。尝试这个：

  constructor(props) {
    super(props);
    this.state = {
      pokemon: {species:{}},
    }
  }