如何使用React.js提取API

Question

我正在学习React并练习如何在React中使用'fetch'。我已经成功获取了一些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

Answer 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';并在渲染功能中使用。

Answer 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
  }))