javascript - 为什么没有在反应中设置下拉菜单的初始值？

Question

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

这是我的代码

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

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

react最终形式的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;
  }
};

标签： javascriptreactjsreact-final-formfinal-form

Answer 1

似乎您正在将您的状态初始化为一个空数组，这会在设置defaultValuein时产生一个要过滤/查找的空数组AutoComplete。将选项直接填充到 state 的初始值中对我来说在你的沙箱中是有用的。

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

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