如何使用 React.js 获取 API答案

【问题标题】：How to use React.js Fetching API如何使用 React.js 获取 API
【发布时间】：2018-03-01 04:04:10
【问题描述】：

我正在学习 React 并练习如何在 React 中使用“获取”。我已经成功获取了一些 API。我从这个 API 中列出了一些随机内容，例如“标题”、“作者”和“分数”。但是，我注意到有些没有“标题”。我不喜欢那些没有“标题”的（留空）。我想在那些没有“标题”的列表中自动添加“A/N”。

有人可以教我怎么做吗？

这是我的代码：

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

class App extends Component{
  constructor(){
  super();
  this.state={
     hits: [],
     isLoading: false,
     error: null,
   }
}

componentDidMount(){
  this.setState({
     isLoading: true
    })
  fetch('https://hn.algolia.com/api/v1/search?query=')
  .then(response => {
       if(response.ok){
       return response.json()
      }else{
      throw new Error('Something went wrong...')
    }
 })
  .then(data => this.setState({
    hits: data.hits,
    isLoading: false
  }))
  .catch(error => this.setState({
     error: null, 
     isLoading: false
  }))
 }

render(){
const {hits, isLoading, error} = this.state;

    if(isLoading){
      return <p>Loading ... </p>
    }
    if(error){
      return <p>{error.message}</p>
     }
return(
    <div className="container">

        {hits.map(data => 
          <ul key={data.objectID}>   
            <li><a href={data.url}>Title: {data.title}</a></li>
            <li>Author:{data.author}</li>
            <li>Points: {data.points}</li>
          </ul> 
        )}
    </div>
   )
  }
}
export default App

【问题讨论】：

设置const DEFAULT_TITLE = 'n/a';并在render函数中使用Title: { data.title || DEFAULT_TITLE }
非常感谢！！！感谢您的宝贵时间，我学到了一些东西。

标签： reactjs api fetch

【解决方案1】：

您可以使用 !!运营商来实现这一点这是你的代码

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

class App extends Component{
  constructor(){
  super();
  this.state={
     hits: [],
     isLoading: false,
     error: null,
   }
}

componentDidMount(){
  this.setState({
     isLoading: true
    })
  fetch('https://hn.algolia.com/api/v1/search?query=')
  .then(response => {
       if(response.ok){
       return response.json()
      }else{
      throw new Error('Something went wrong...')
    }
 })
  .then(data => this.setState({
    hits: data.hits,
    isLoading: false
  }))
  .catch(error => this.setState({
     error: null, 
     isLoading: false
  }))
 }

render(){
const {hits, isLoading, error} = this.state;

    if(isLoading){
      return <p>Loading ... </p>
    }
    if(error){
      return <p>{error.message}</p>
     }
return(
    <div className="container">

        {hits.map(data => 
          <ul key={data.objectID}>   
            <li><a href={data.url}>Title:  {!!data.title ? data.title : "A/N" }</a></li>
            <li>Author:{data.author}</li>
            <li>Points: {data.points}</li>
          </ul> 
        )}
    </div>
   )
  }
}
export default App

实现此目的的替代方法将 const default_title 设置为 'n/a';并在渲染函数中使用。

【讨论】：

非常感谢！！！感谢您的宝贵时间，我学到了一些新东西。
@JThinlayTsarong - 如果对您有帮助，请将此答案标记为已验证，以便遇到相同问题的人可以发现此解决方案很有用。

【解决方案2】：

您可以使用map() 并像这样保存数据：

fetch('https://hn.algolia.com/api/v1/search?query=')
  .then(response => {
       if(response.ok){
       return response.json()
      }else{
      throw new Error('Something went wrong...')
    }
 })
  .then(data => this.setState({
    hits: data.hits.map( item => {
      if(!item.Title){
        item.Title = 'A/N';
      }
      return item;
    }),
    isLoading: false
  }))
  .catch(error => this.setState({
     error: null, 
     isLoading: false
  }))

【讨论】：

非常感谢！！！感谢您的宝贵时间，我学到了一些新东西。