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＆amp;名称。但是当我尝试

时

console.log(pokemon.species.name) 

它返回“TypeError：pokemon.species is undefined”

在状态为{= pokemon：{}}的状态下，状态看起来像这样。

Answer 1

在API响应之前，您似乎没有pokemon.species。试试这个：

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

Answer 2

这是因为您在加载数据之前尝试显示数据。

试试这个：

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

  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
    if (pokemon === null) {
      return null;
    }
    return (
      <Grid>
        <p>{pokemon.species.name}</p>
        <Image src={this.props.image} responsive alt='member picture' />
     </Grid>
    )
  }

}