为什么没有在反应中设置下拉列表的初始值？

Question

你能告诉我为什么我的初始值没有在反应中设置吗？我正在使用react-final-form

这是我的代码

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

我的初始值打印在控制台中，但未在下拉列表中设置

API link 反应最终形式

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

您似乎正在将状态初始化为一个空数组，在 AutoComplete 中设置 defaultValue 时会生成一个空数组 filtered/found。将选项直接填充到 state 的初始值中对我在你的沙箱中有用。

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

我的猜测是效果在第一次渲染时触发并设置了一些状态，但该状态在下一个渲染周期（即第二次渲染）之前不可用。到那时 select 已经设置了它的默认值（从第一次渲染时开始）。