react-final-form结合react-select条件下拉框的初始化及切换异常问题

你遇到的核心矛盾很明确：PickOptions组件在初始化时会强制清空第二个下拉框，覆盖了你设置的初始值；但如果去掉清空逻辑，切换第一个下拉框时第二个的选中值又无法自动重置。下面是针对性的解决方案：

问题根源 #

你的PickOptions组件里的useEffect在组件首次挂载时就会触发（因为aValue会被初始化为第一个下拉框的默认值，触发依赖项变化），此时调用changeB(undefined)会直接清空第二个下拉框的初始值，导致你设置的initialValue完全失效。

解决方案：区分首次渲染与后续值变化 #

我们可以用useRef标记组件是否为首次渲染，只在后续第一个下拉框值变化时才清空第二个下拉框，首次渲染时保留初始值：

const PickOptions = ({ a, b, optionsMap, children }) => {
  const aField = useField(a, { subscription: { value: 1 } });
  const bField = useField(b, { subscription: {} });
  const aValue = aField.input.value.value;
  const changeB = bField.input.onChange;
  const [options, setOptions] = React.useState(optionsMap[aValue]);
  // 标记是否为首次渲染
  const isFirstRender = React.useRef(true);

  React.useEffect(() => {
    // 首次渲染时跳过清空操作，保留初始值
    if (isFirstRender.current) {
      isFirstRender.current = false;
      setOptions(optionsMap[aValue]);
      return;
    }
    // 后续切换第一个下拉框时，清空第二个并更新选项
    changeB(undefined);
    setOptions(optionsMap[aValue]);
  }, [aValue, changeB, optionsMap]);

  return children(options || []);
};

为什么这样有效？ #

1. 首次渲染阶段：isFirstRender.current为true，我们只更新第二个下拉框的选项列表，不执行清空操作，这样你设置的initialValue就能正常生效。
2. 后续值变化阶段：当第一个下拉框的值改变时，isFirstRender.current已经变为false，此时会自动清空第二个下拉框并更新对应选项，完全符合你的业务需求。

额外优化：简化初始值判断逻辑 #

你可以用ES6可选链语法简化原有的initialValue判断，逻辑保持一致但更简洁：

initialValue={ 
  this.state.data.options[index]?.secondOption 
  || options.filter(option => option.type === "option")[0] 
}

这样调整后，既能保留第二个下拉框的初始值，又能在切换第一个下拉框时正确重置第二个的选中状态~

内容的提问来源于stack exchange，提问作者jupiteror