如何从此API对象的响应中显示quoteText

Question

随机报价

如何为我的随机报价机应用程序与该对象分开显示quoteText和quoteAuthor。我已经尝试通过编写{this.state.quote.quoteText}的标准方式。

这是我从API中获得的响应对象。

1：[API的响应对象]

+代码段

2：[代码段1]

3：[代码段2]

Answer 1

可能是在安装组件后，尚未提取您的数据，因此这是一种可能的解决方案。在执行此操作的第37行上

{this.state.quote !== null  && <p>{this.state.quote}</p>}

相反，请尝试

this.state.quote.quoteText ? this.state.quote.quoteText  : "";

也在您执行此操作的第23行上

axions.get("the url") 
    .then((res) => { this.setState({
        quote: res.data
       }) 
        }) 

添加此行代码

 .then((response) => response.json())

因此您的代码将如下所示

axions.get("the url")
  .then((response) => response.json())
  .then((res) => {
    this.setState({
      quote: res.data
    })
  })

**即使失败，也请尝试使用获取代码的代码**

fetch("the url goes here", {
    method: 'GET'
  })
  .then((response) => response.json())
  .then((data) => {

      this.setState({
        quote: data.response
      })

  

您可以在componentDidMount（）生命周期中直接调用此提取API。