Reactjs React JS-从开放AQ API呈现数据

我正在尝试做一个应用程序，它显示了选定国家的10个污染最严重的城市，使用的数据来自。然而，我得到的错误是

TypeError:this.props.cities.map不是一个函数

，我不知道该如何修复它。我发布了整个代码，因为你可能会发现一些错误，我甚至没有考虑过。p> 这是我的应用程序文件：

import React from 'react';
import './App.css';
import Input from './components/Input';
import CitiesList from './components/CitiesList';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      countryCode: '',
      cities: []
    };
    this.onCountryChange = this.onCountryChange.bind(this);
    this.airQuality = this.airQuality.bind(this);
  }

  onCountryChange = (event) => {
    this.setState({
      countryCode: event.target.value
    })
  };

  airQuality = () => {
    const URL = 'https://api.openaq.org/v1/measurements?country=${countryCode}&limit=10&order_by=value&sort=desc';

    fetch(URL) 
      .then(response => {
        if (response.ok) {
          return response;
        }
        throw Error(response.status)
      })
      .then(response => response.json())
      .then(data => {
        this.setState({
          cities: data.results
        })
      })
      .catch(error => console.log(error))
  }



  render() {
    return (
      <div>
        <Input onChange={this.onCountryChange}/>
        <CitiesList cities={this.airQuality}/>
      </div>
    )
  }
}

export default App;

我将感谢你的帮助

---

编辑： Akshit Mehra和Roman Unt给了我很多帮助，我解决了代码中的两个问题，但是仍然有一些错误。当我选择国家并查看时，它仍然不会显示城市，这是因为

countryCode

不会更新。函数

onCountryChange

甚至没有启动，我意识到这是因为onChange事件处理程序应该在input标记中，我把它放在名为input的组件中。所以我把它移到了

Autocomplete

组件，现在我有了：

在App.js的

<Input onCountryChange={this.onCountryChange}/>

const Input = ({onCountryChange}) => (
    <Autocomplete
    id="combo-box"
    options={countries}
    getOptionLabel={option => option.country}
    style={{ width: 300, marginTop: 10 }}
    onChange={onCountryChange}
    renderInput={params => (
      <TextField {...params} label="Type a country" variant="outlined" fullWidth />
    )}
    />
)

现在我在控制台中看到函数
onCountryChange
启动，但它仍然不会更新
countryCode
（this.state.countryCode为0）

您能帮忙吗？
您正在将
空气质量
传递到您的
组件中，该组件是一种方法，而不是一个可移植数组。此方法正在更新
城市
状态，您应该在
城市
数组上使用
.map（）
函数

相反，将
城市
状态作为
道具
传递，例如

让我知道这是否有用。
我做了几次更正，现在它呈现数据

我更改了
onCountryChange
功能。现在我在Input.js中看到了：
在App.js中：

onCountryChange = (object, value) => {
    this.setState({
      countryCode: value.code
    });

  };

在渲染方法中：

const { countryCode } = this.state;

在
consturl
中，我将引号改为反勾号，
countryCode
改为
this.state.countryCode

我将
componentDidMount
更改为
componentdiddupdate

我仍然需要改进它，因为我在控制台中看到，airQuality函数不断重复，它在渲染10个元素后不会停止，而且，它不显示城市名称，只显示参数、值和单位，但我更进一步：）
为什么在这里传递抓取方法？而不是通过获取城市来传递状态？谢谢，这很有帮助，现在我没有错误。但是它仍然不起作用，我的意思是，当我选择国家时，它不会显示城市。也许我理解得不正确，但我认为我应该以某种方式将airQuality放入render方法中（但如何？），因为现在应用程序似乎没有使用此方法。您可以根据需要调用
componentDidMount（）
和/或
componentdiddupdate（）
生命周期挂钩中的
this.airQuality（）
方法。所有从API获取数据的调用都应该从这些生命周期挂钩中进行。谢谢，这很有帮助，但仍然有一些问题。我把它写成问题的编辑。
const countries = [
    {country: 'Poland', code: 'PL'},
    {country: 'Germany', code: 'DE'},
    {country: 'Spain', code: 'ES'},
    {country: 'France', code: 'FR'}
]

onCountryChange = (object, value) => {
    this.setState({
      countryCode: value.code
    });

  };

const { countryCode } = this.state;