React Final Form三级级联选择默认值设置及报错修复

问题根源 #

切换第一/第二级选项时出现Cannot convert undefined or null to object错误，是因为第三级下拉尝试对undefined或null执行Object.entries操作；而第一级选中后未自动选中第二级首个选项，是缺少联动赋值逻辑。

修复方案 #

1. 给第三级下拉加空值安全校验

修改第三级Select的options生成逻辑，确保当第二级对应的子数据不存在时，传入空对象避免报错：

<Select
  label="Third Level"
  name="third"
  options={Object.entries(formData[values.second] || {}).map(([key, value]) => ({
    value: key,
    label: value
  }))}
/>

这里用formData[values.second] || {}兜底，就算对应值是undefined，也会用空对象让Object.entries正常执行。

2. 第一级选中后自动设置第二级默认值

在第一级Select的onChange事件里，手动调用React Final Form的change方法，设置第二级的首个选项：

<Select
  label="First Level"
  name="first"
  options={Object.entries(formData).map(([key, value]) => ({
    value: key,
    label: key
  }))}
  onChange={(event, newValue) => {
    // 更新第一级字段值
    change('first', newValue.value);
    // 获取当前第一级对应的第二级数据
    const firstLevelChildren = formData[newValue.value];
    if (firstLevelChildren) {
      // 取第二级的第一个key作为默认选中值
      const firstSecondOption = Object.keys(firstLevelChildren)[0];
      change('second', firstSecondOption);
      // 同时自动设置第三级的默认值（可选，按需添加）
      const secondLevelChildren = firstLevelChildren[firstSecondOption];
      if (secondLevelChildren) {
        const firstThirdOption = Object.keys(secondLevelChildren)[0];
        change('third', firstThirdOption);
      }
    }
  }}
/>

3. 第二级切换时联动更新第三级

同样在第二级的onChange里处理第三级的默认值，确保切换后第三级能正确加载并选中首个选项：

<Select
  label="Second Level"
  name="second"
  options={Object.entries(formData[values.first] || {}).map(([key, value]) => ({
    value: key,
    label: key
  }))}
  onChange={(event, newValue) => {
    change('second', newValue.value);
    // 获取当前第二级对应的第三级数据
    const secondLevelChildren = formData[values.first]?.[newValue.value];
    if (secondLevelChildren) {
      const firstThirdOption = Object.keys(secondLevelChildren)[0];
      change('third', firstThirdOption);
    }
  }}
/>

效果说明 #

这几个修改后：

• 选中第一级选项时，第二级会自动选中首个选项，同时第三级也会联动加载并选中对应首个选项
• 切换任何一级选项时，下级下拉都会安全加载数据，不会再出现Cannot convert undefined or null to object错误

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