Clear the api response array before another API call

Question

I'm facing a problem of API response array(in my case it's cities) is storing and mapping the previous result of the weather searches. Which i don't want. i want to replace the previous results with the current search API response results. here is the code.(im new to the reactjs)

import React from 'react';
import  { useState,useEffect } from 'react';
import ReactDOM from 'react-dom';

const Content=(props)=>{

  const [cities, setItems] = useState([]);

  // const API=api;
  const appi=props.api;
  console.log(props.api);
  console.log(cities)

  useEffect(() => {
    if (appi) {
      (async () => {
        try {
          const response = await fetch(appi);
          const result = await response.json();
          const updatedCities =cities.concat(result)
          setItems(updatedCities);
        } catch(err) {
          console.error(err);
        }
      })();
    }
  }, [appi]);


    return (
        <ul>
        {cities.map(citi => (
          <li key={citi.city.id}>  
            The city id is  {citi.city.id}   
            The city name is  {citi.city.name}   
            The temparature is {citi.list[0].main.temp}
          </li>
        ))}
      </ul>
  
      
    )
  }


export default Content;

Here is the output of the code As you can see there are two objects has been mapped. But there should be only one objects. How to fix that. p.s I already tried putting setItems([ ]) into the useEffect but didn't work. Thank you

Welcome to SO! Can you show what the response object `result` looks like exactly or provide the API url as text? It's hard to tell what's going on the console image. — ggorlen, Feb 21 '21 at 16:06
you are using `concat` so you get a combined array re: https://stackoverflow.com/a/44572132/125981 so empty it then push the new values in. — Mark Schultheiss, Feb 21 '21 at 16:29
@MarkSchultheiss that is what exactly i want to do but also that is the thing i don't know. :/ — aravinda nawarathna, Feb 21 '21 at 16:46
@ggorlen here is the url- http://api.openweathermap.org/data/2.5/forecast?q=Wattala,LK&mode=json&appid=5c4420d5c8a61c16e5ee37e4ca265763 — aravinda nawarathna, Feb 21 '21 at 16:49
@ggorlen API works fine and it fetches data. but the results are concatinating and store previous result objects. — aravinda nawarathna, Feb 21 '21 at 16:52
@MarkSchultheiss i get this error TypeError: cities.map is not a function when i do that — aravinda nawarathna, Feb 21 '21 at 16:54

score 0 · Accepted Answer · answered Feb 21 '21 at 17:39

I've solve the problem. here is the answer.The "array.shift()" - it removes the first element of the array. so it removes the first element of the "cities" array before concatinating them.

    useEffect(() => {
    if (appi) {
      (async () => {
        try {
          const response = await fetch(appi);
          var result=[];
          result = await response.json();
          cities.shift();
          const updatedCities =cities.concat(result)
          setItems(updatedCities);
        } catch(err) {
          console.error(err);
        }
      })();
    }
  }, [appi]);

Diwakar Singh · Answer 2 · 2021-02-23T07:08:51.220

0

Please wrap result into array as it is an object coming from API.

  useEffect(() => {
    if (appi) {
      (async () => {
        try {
          const response = await fetch(appi);
          const result = await response.json();
           setItems([result]);
        } catch(err) {
          console.error(err);
        }
      })();
    }
  }, [appi]);

edited Feb 23 '21 at 07:08

answered Feb 21 '21 at 17:46

Diwakar Singh

684
1
5
19

not working sir i'm getting this error."TypeError: cities.map is not a function" – aravinda nawarathna Feb 22 '21 at 05:07
@aravinda Could you please show what you are getting inside `result` – Diwakar Singh Feb 22 '21 at 09:34
http://api.openweathermap.org/data/2.5/forecast?q=Wattala,LK&mode=json&appid=5c4420d5c8a61c16e5ee37e4ca265763 – aravinda nawarathna Feb 22 '21 at 15:55

Clear the api response array before another API call

2 Answers2