Выбрать рендеринг компонента

Question

Я сделал настраиваемый компонент выбора, в реакции он выглядит так:

import { useDispatch, useSelector } from "react-redux";

const Select = ({
  id,
  options,
  dispatchKey,
  selector,
  disabledOption = false,
}) => {
  const dispatch = useDispatch();
  const formValue = useSelector((state) => state.form[selector]);

  return (
    <select
      id={id}
      required
      onChange={(e) => dispatch({ type: dispatchKey, value: e.target.value })}
      value={'IT'}
      className="mt-1 block form-select w-full py-2 px-3 py-0 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5"
    >
      {disabledOption && (
        <option value="" disabled>
          {disabledOption}
        </option>
      )}
      {options &&
        options.map((o) => (
          <option value={o.value} key={o.value}>
            {o.text}
          </option>
        ))}
    </select>
  );
};

export default Select;

Я использую его так:

const countries = [
    { value: "NL", text: "Nederland ??" },
    { value: "BE", text: "Belgie ??" },
    { value: "DE", text: "Duitsland ??" },
    { value: "IT", text: "Italië ??" },
  ];

<Select
  id="country"
  options={countries}
  dispatchKey="SET_COUNTRY"
  selector="country"
  disabledOption="Kies een land"
/>

В этом раскрывающемся списке показаны страны. Прямо сейчас я жестко запрограммировал «ЭТО». Однако, когда компонент загружен, он показывает «NL», когда я что-то набираю в другом поле, он внезапно отображает «IT».

Что я делаю неправильно, почему «IT» не отображается сразу?

Answer 1

Думаю, я могу объяснить поведение начальной загрузки вашего Select компонента.

Когда вы передаете disabledOption в качестве опоры, значение по умолчанию false теперь установлено на "Kies een land" .

Итак, когда выполняется следующее: -

  {disabledOption && (
    <option value="" disabled>
      {disabledOption}
    </option>
  )}

disabledOption не пустая строка является правдой и не замыкается.

Итак, следующий элемент отображается.

<option value="" disabled>
          {disabledOption}
        </option>

Поскольку это disabled, отображается первая запись из countries, то есть NL.

Answer 2

Добавить selected реквизиты к параметру, который соответствует значению

<option
  selected={val === opt.value}
  value={opt.value}
>
  {opt.label}
</option>

Answer 3

Кажется, в вашем коде нет ничего плохого (проверял точный код, указанный в вопросе). Просто проверьте наличие опечаток / попробуйте очистить кеш браузера / перезапустить сервер узла.