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

Question

我目前正在使用这个 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"}，但无法呈现带有国家/地区名称的选择选项下拉列表。

Answer 1

你正在摧毁这个国家，而array不是在object你的内部map。另外，我不明白value你的 each option。我想你想把每个都设置value成一个object？如果是，你不会想要那样做。我建议你这样做。...function onChange(event) {&nbsp; const { value } = event.target;&nbsp; const selectedCountry = countries.find(({ iso2 }) => iso2 === value);&nbsp; console.log(selectedCountry);}return (&nbsp; <div>&nbsp; &nbsp; <select onChange={onChange}>&nbsp; &nbsp; &nbsp; {countries.map((country, i) => (&nbsp; &nbsp; &nbsp; &nbsp; <option key={i} value={country.iso2}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {country.name}&nbsp; &nbsp; &nbsp; &nbsp; </option>&nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; </select>&nbsp; </div>);如果您想获取所选国家/地区的统计数据，则必须包括要在您的问题上使用的 API。目前您提到的 API 只返回countries.