jeudi 19 avril 2018

React Application 'npm test' Warning

I created a React application for practice. It works in my browser; however when I ran "npm test" from my terminal, it giving me a warning "Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. Please check the code for the FetchOne component."

I checked the FetchOne component but I couldn't figure it out. Is there anybody help me out, thank you!

Here is my code:

import React, {Component} from 'react';
const API = 'https://hn.algolia.com/api/v1/search?query=';
const DEFAULE_TITLE = 'N/A title';

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

componentDidMount(){
  this.setState({ isLoading: true })
   fetch(API)
  .then(response =>{
   if(response.ok){
     return response.json()
    }else{
        throw Error('Somethig went wrong...')
         }
     } )
  .then( data => this.setState({
      hits: data.hits,
      isLoading: false,
  }))
  .catch(error => this.setState({
       error,
       isLoading: false
      }))
  }

 render(){
  const { hits, isLoading, error } = this.state;
    if(isLoading){
      return <p> Loading... </p>
     }
    if(error){
      return <p>{error.message}</p>
     }

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

Aucun commentaire:

Enregistrer un commentaire