Как установить начальное значение выбора в React?

Question

У меня есть простое приложение для отображения данных. Состояние меняется от выбора. Однако я хочу, чтобы опция выбора по умолчанию была объединенной. В настоящее время эта опция по умолчанию используется в Афганистане, поскольку она является первой в алфавите.

export default function CountrySelect() {
  const [country, setCountry] = useState('GBR');
  const countries = useFetch('https://covid19.mathdro.id/api/countries');

  if (!countries) return null;

  const countryArr = Object.entries(countries.countries).map(([key, value]) => {
    return {
      name: `${key}`,
      code: `${value}`
    };
  });

  return (
    <div>
      <h2>Showing: {country}</h2>
      <select
        onChange={(event) => setCountry(event.target.value)}
        defaultValue={country}>
        {countryArr.map((country) => (
          <option value={country.code} key={country.name}>
            {country.name}
          </option>
        ))}
      </select>
      <Info url={`https://covid19.mathdro.id/api/countries/${country}`}></Info>
    </div>
  );
}

Для уточнения состояния страны используется значение «GBR», и отображаются данные из «GBR» или Великобритании. Это тег, с которым у меня проблема.

Answer 1

Если вы не можете использовать defaultValue, просто добавьте простые условия

const [countryState, setCountry] = useState('GBR');
{countryArr.map(country => {
      if (country.name !== countryState) {
        return (
          <option
            value={country.code}
            label={country.name}
            key={country.name}
          >
            {country.name}
          </option>
        );
      } else {
        return (
          <option
            value={country.code}
            label={country.name}
            key={country.name}
            selected="selected"
          >
            {country.name}
          </option>
        );
      }
    })}

Answer 2

Установите свойство объекта, которое вы хотите использовать по умолчанию. Поскольку вы хотите, чтобы Великобритания была выбрана, установите defaultValue на код , который вы получите от API.

Песочница для справки: https://codesandbox.io/s/react-hooks-t1c2x

export default function CountrySelect() {
  const [selectedCountry, setCountry] = useState({
    code: "GB"
  });
  const countries = useFetch("https://covid19.mathdro.id/api/countries", {});
  if (!countries) return null;
  const countryArr = Object.entries(countries.countries).map(([key, value]) => {
    return {
      name: `${key}`,
      code: `${value}`
    };
  });
  return (
    <div>
      <select
        onChange={event => setCountry(event.target.value)}
        defaultValue={selectedCountry.code}
      >
        {countryArr.map(country => (
          <option value={country.code} key={country.name}>
            {country.name}
          </option>
        ))}
      </select>
    </div>
  );
}

Answer 3

Из кода, кажется, HTML выбрать, а не реагировать-выбрать. Нет атрибута значения по умолчанию для выбора по умолчанию. Вы можете добавить выбранный атрибут к необходимой опции здесь, например:

   const [selectedCountry, setCountry] = useState({ code: <Countrycode of UK>});
// ..
// ..
     <select
        onChange={(event) => setCountry(event.target.value)}
        {countryArr.map((country) => (
          <option selected={selectedCountry.code === country.code} value={country.code} key={country.name}>
            {country.name}
          </option>
        ))}
      </select>