Почему начальное значение выпадающего меню не задано в реакции?

Question

Не могли бы вы сказать мне, почему мое начальное значение не установлено в реакции? Я использую react-final-form

Вот мой код

https://codesandbox.io/s/frosty-star-1qcw3

Мое начальное значение печатается в консоли, но не устанавливается в раскрывающемся списке

API-интерфейс окончательной формы реакции

https://final-form.org/docs/react-final-form/examples

const [options, setOptions] = useState([]);
  useEffect(() => {
    console.log("urllll");

    // (async () => {
    //   setOptions(await getDropDowOptions(dataKey));
    // })();
    console.log(options);
    console.log(value);
    (() => {
      setOptions(getDropDowOptions(dataKey));
    })();
  }, []);





const getDropDowOptions = dataKey => {
  console.log(dataKey);
  switch (dataKey) {
    case "abc":
      console.log("========");
      const slots = [
        {
          key: "9-13",
          label: "09:00-13:00",
          value: "09:00-13:00"
        },
        {
          key: "13:00-16:00",
          label: "13:00-16:00",
          value: "13:00-16:00"
        },
        {
          key: "16:00-19:00",
          label: "16:00-19:00",
          value: "5000"
        }
      ];
      return slots;
  }
};

Answer 1

Похоже, вы инициализируете свое состояние как пустой массив, что дает пустой массив, который будет отфильтрован / найден при установке defaultValue в AutoComplete. Перемещение опции, заполняющей непосредственно в начальное значение состояния, помогает мне в вашей песочнице.

const [options, setOptions] = useState(getDropDowOptions(dataKey));

Я предполагаю, что эффект запускается при первом рендеринге и устанавливает некоторое состояние, но это состояние недоступно до следующего цикла рендеринга, то есть второго рендеринга. К тому времени выбор уже установил свое значение по умолчанию (во время первого рендеринга, когда он был смонтирован).