select 内的选项值与 React

Question

我是 React 新手，我想填写 <select>

我遇到的问题是，当我想单击我的其中一项时...下拉菜单 如果我对我的项目进行硬编码，则只显示不同的选项。这是我的代码

父组件

import React, { Fragment, useState, useEffect } from "react";
import Country from "./Country";
const CountriesList = ({ handleOnChange }) => {
  const [countriesLoaded, setCountriesLoaded] = useState(false);
  const [countriesList, setCountriesList] = useState([]);

  const getCountries = async () => {
    const api = "https://restcountries.eu/rest/v2/all";
    const response = await fetch(api);
    const countrieslst = await response.json();
    setCountriesList(countrieslst);
    setCountriesLoaded(true);
  };

  useEffect(() => {
    getCountries();
  }, [countriesList]);

  return (
    <Fragment>
      <select id="country" name="country" onChange={handleOnChange}>
        <option value="">-- Select a country --</option>

        {countriesLoaded
          ? countriesList.map((country) => (
              <Country key={country.alpha2Code} countryItem={country} />
            ))
          : null}
      </select>
    </Fragment>
  );
};

export default CountriesList;

子组件

import React from "react";
const Country = ({ country }) => {
  return <option value={country.alpha2Code}>{country.name}</option>;
};
export default Country;

如果我检查 DOM 没问题，但只显示我的第一个选项

Thnx 4 支持，祝你有愉快的一天！

Answer 1

[编辑] 只需在代码中添加

select 内的选项值与 React

Option values inside a select with React

reactjs

select

option