React中成功获取API数据却无法setState，页面持续显示加载状态的问题排查

嘿，我一眼就看到你代码里的两个小问题啦，咱们一个个说：

第一个问题：fetch的then链传递数据出错 #

你在fetch的第二个then里写了console.log(data)，但console.log()这个函数本身是没有返回值的（返回undefined）。这就导致下一个then里的data变成了undefined，所以this.setState({cake_object: data})其实是把cake_object设成了undefined，你的组件状态里自然永远没有正确的蛋糕数据，页面就一直停在“Loading this cake”啦。

解决办法很简单，把console.log和setState放在同一个then回调里，或者让console.log的回调返回data：

// 方案一：合并到同一个then里
.then(data => {
  console.log(data);
  this.setState({cake_object: data});
})

// 方案二：返回data给下一个then
.then(data => {
  console.log(data);
  return data;
})
.then(data => this.setState({cake_object: data}))

第二个问题：渲染时错误访问数据 #

你的_renderEachCake方法里用了this.cake_object，但实际上你把数据存在了组件的state里，应该用this.state.cake_object才对！就算前面的setState对了，这里也拿不到数据，所以这个也得改。

我把完整的修正代码给你：

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

class Cake extends Component {
  constructor(props){
    super(props);
    this.state = { }
  }

  componentDidMount() {
    this._fetchApiEachCake();
  }

  _renderEachCake = () => {
    // 解构state里的cake_object，代码更简洁
    const { cake_object } = this.state;
    return <EachCake 
      image={cake_object.image} 
      source={cake_object.source} 
      body={cake_object.body} 
    />
  }

  _fetchApiEachCake = () => {
    return fetch("http://127.0.0.1:8000/api/cake/3")
      .then((response) => response.json())
      .then(data => {
        console.log(data);
        this.setState({cake_object : data});
      })
      .catch((err) => console.log(err)) // 建议加上catch，方便排查请求错误
  }

  render() {
    return (
      <div>
        {this.state.cake_object ? this._renderEachCake() : "Loading this cake"}
      </div>
    )
  }
}

export default Cake

另外提醒你一下，记得把catch加上哦，万一API请求出错了，你也能在控制台看到错误信息，方便调试～

内容的提问来源于stack exchange，提问作者Ryan Oh