TypeError: oldCities is not iterable

Question

我正在使用 React 开发天气应用程序，但出现此错误且无法解决

“TypeError：oldCities 不可迭代”

这是我的完整代码：

import React, { useState } from 'react';
import './App.css';
import Nav from './components/Nav';
import Cards from './components/Cards.jsx'

export default function App() {

  const [cities, setCities] = useState()

  console.log(setCities)

  const apiKey = 'api_key'

  function onSearch(city){
    fetch(`http://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`)
      .then(response => response.json())
      .then(json => {
        if(json.main !== undefined){
          const city = {
            min: Math.round(json.main.temp_min),
            max: Math.round(json.main.temp_max),
            id: json.id,
            img: json.weather[0].icon,
            wind: json.wind.speed,
            temp: json.main.temp,
            name: json.name,
            logitude: json.coord.lon,
            latitude: json.coord.lat
          };
          setCities(oldCities => [...oldCities, city])
        }
        else{
          alert('Ciudad no encontrada')
        }
      })
      .catch(e => console.log(e))
  }

  return (
    <div className="App">
      { /* Tu código acá: */ }
      <Nav onSearch={onSearch} />
      <Cards cities={cities} />
    </div>
  );
}

关于如何以不同方式将数据添加到 setCities 的想法？

Answer 1

由于您使用的是 React，因此我假设您的代码如下所示

const [oldCities, setCities] = useState([])

我不确定 oldCities 的用途是什么，但如果您想附加从您的 API 调用中获得的城市值，它应该是

setCities([...oldCities, new_city ])  // Append to cities array
// Note here to not use oldCities.append
// bc it will preserve the memory address of the array
// and hence not update the component state

TypeError: oldCities is not iterable

TypeError: oldCities is not iterable

javascript

frontend

promise

reactjs

es6-promise