使用 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) {

  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.