Question

所以我试图使用homeworld id获取我的SWAPI json-server两次获取homeworld名称，但我得到＆＃34; TypeError：无法读取属性＆＃39; name＆＃39;未定义＆＃34;。我是React的新手，所以如果它看起来很乱我很抱歉！提前谢谢！

import React, { Component } from 'react';
import './Card.css';

const person = personID =>
 `http://localhost:3008/people/${personID}`

const picture = pictureID =>
 `http://localhost:3008/${pictureID}`

 // const planet = planetID =>
 //  `http://localhost:3008/planets/${planetID}`

class Card extends Component {
  constructor(props){
    super(props);
    this.state ={
      requestFailed: false,
      person: 1,
      planet: 4
    }
  }
  componentDidMount(){
    fetch(person(this.state.person))
    .then(response => {
      if(!response.ok) {
        throw Error("Network Request Failed");
      }
      return response
    })
      .then(d => d.json())
      .then(d => {
        this.setState({
          cardData: d
        })
      }, () => {
        this.setState({
          requestFailed: true
        })
      })

fetch(`http://localhost:3008/planets/${this.state.cardData.homeworld}`)
      .then(data => data.json())
      .then(data => {
        this.setState({
          homeData: data
        })
      })
  }

  render() {
    if(this.state.requestFailed === true) return <p>Error please try 
again!</p>
    if(!this.state.cardData) return <p>Loading ...</p>
    return (
      <div className='card'>
        <div className='card-content'>
            <div className='card-name'>{this.state.cardData.name}</div>
             <img src={picture(this.state.cardData.image)} 
alt='profile'/>
            <p>
            <span>Birthday:</span>
            <span>{this.state.cardData.birth_year}</span>
        </p>
        <p>
            {/* Note that in order to get the homeworld's name, you have to get the planet name from a different endpoint than the people */}
            <span>Homeworld:</span>
            <span>{this.state.homeData.name}</span>
        </p>
     </div>
   </div>

   );
  }
}


export default Card;

Answer 1

看起来第一个问题是你在加载之前尝试渲染homeData.name。您可能应该进行类似于cardData加载检查的加载检查。或者你可以在装载之前不做任何渲染：

{this.state.homeData ?
  <span>{this.state.homeData.name}</span> :
  <span>Loading...</span>
}

第二个问题是，您与第一个fetch同时执行homeData fetch的第二个fetch(`http://localhost:3008/planets/${this.state.cardData.homeworld}`)。所以这一行：

cardData

总是会失败，因为fetch(person(this.state.person)) .then(response => { if(!response.ok) { throw Error("Network Request Failed"); } return response }) .then(d => d.json()) .then(d => { this.setState({ cardData: d }) fetch(`http://localhost:3008/planets/${d.homeworld}`) .then(data => data.json()) .then(data => { this.setState({ homeData: data }) }) }, () => { this.setState({ requestFailed: true }) })在运行时尚未加载到状态。

你应该做的是将它移到第一个请求的响应部分：

mouseleave

将这些提取到单独的函数中以帮助清理它会有所帮助。

从状态反应多次获取

1 个答案: