使用 React，如何在 API 中从 JSON 中获取数据 - 数组对象答案

【问题标题】：Using React, how to grab data from JSON in API - object of arrays使用 React，如何在 API 中从 JSON 中获取数据 - 数组对象
【发布时间】：2020-09-08 01:13:56
【问题描述】：

我目前正在使用这个 API https://covid19.mathdro.id/api/countries 来练习抓取数据。我正在尝试选择，有一个下拉选项，我可以在其中选择一个国家（还可以获取国家代码 (iso3) 作为值/键），然后显示统计信息（例如确认、恢复等）。

使用console.log，我回来了：

{countries: Array(188)}
 countries: (188) [{…}, {…}, …]
 __proto__: Object

国家似乎是一个包含嵌套数组和对象的对象：

{countries: Array(188)}
 countries: Array(188)
  [0 … 99]
  [100 … 187]

我目前正在尝试获取国家/地区然后映射两个数组：[0 ... 99] 和 [100 ... 187]，以便最后我可以动态呈现国家名称的下拉选项列表 (<select> + <option>)使用数据，例如：{name: "Afghanistan", iso2: "AF", iso3: "AFG"} 并选择一个国家并查看所选国家的统计数据。

在 React 渲染中：

  return (
    <div>
      <select>
        {grabbingData.map(([country, code]) => (
          <option key={code} value={countries.iso3[code]}>
            {country}
          </option>
        ))}
      </select>
    </div>
  );

使用console.log(countries.countries[187])，我可以获取{name: "Zimbabwe", iso2: "ZW", iso3: "ZWE"}，但我无法使用国家/地区名称呈现选择选项下拉列表。

【问题讨论】：

你可以仔细检查你在地图中的破坏是否正确？
我能够使用 console.log 获取一个国家/地区，但无法使用国家/地区名称呈现下拉选项列表。

标签： javascript json reactjs

【解决方案1】：

您正在以array 而不是object 中的map 来破坏国家/地区。

另外，我不明白你的每个option 的value。我想您想将每个value 设置为object？如果是，你就不想这样做。

我建议你这样做。

...

function onChange(event) {
  const { value } = event.target;
  const selectedCountry = countries.find(({ iso2 }) => iso2 === value);

  console.log(selectedCountry);
}

return (
  <div>
    <select onChange={onChange}>
      {countries.map((country, i) => (
        <option key={i} value={country.iso2}>
          {country.name}
        </option>
      ))}
    </select>
  </div>
);

如果您想获取所选国家/地区的统计数据，您必须包含要在您的问题上使用的 API。目前你提到的API只返回countries。

【讨论】：