时间戳

首页 > 解决方案 > 在另一个 API 调用之前清除 api 响应数组

javascript - 在另一个 API 调用之前清除 api 响应数组

问题描述

我面临的 API 响应数组（在我的情况下是城市）的问题是存储和映射天气搜索的先前结果。这是我不想要的。我想用当前的搜索 API 响应结果替换以前的结果。这是代码。（我是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;

这是代码的输出如您所见，有两个对象已被映射。但应该只有一个对象。如何解决。ps 我已经尝试将 setItems([ ]) 放入 useEffect 但没有奏效。谢谢

标签： javascriptarraysreactjs

解决方案

我已经解决了这个问题。这是答案。“array.shift()” - 它删除了数组的第一个元素。所以它在连接它们之前删除了“城市”数组的第一个元素。

    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]);

推荐阅读