如何使用React.js提取API

Question

I'm learning React and practicing how to use 'fetch' in React. I have successfully fetched some API. I listed some random content out of this API, such as 'Title', 'Author' and 'Points'. However, I noted that some don't have the 'Title'. I don't like those that don't have 'Title'(leaving it blank). I'd like to automatically add 'A/N' in those lists that don't have the 'Title'.

Does anybody can teach me how to do that?

Here is my code:

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

You can make use of !! operator to achieve this Here is you code

 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 

ALternative way to achieve this Set const default_title to 'n/a'; and use in render function.

Answer 2

You can use map() and save data like this:

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