页面刷新触发TypeError: Cannot read properties of undefined (reading 'value')求助

核心问题定位 #

1. 类型不匹配：qualifiersValues赋值时用了requisitionId || []，若requisitionId是单个ID值（字符串/数字），最终qualifiersValues会是单个值而非数组，但useForm的默认值是数组[]，类型不一致会导致ControlledSelect处理数据时触发Cannot read properties of undefined (reading 'value')错误。
2. 刷新时数据初始化顺序：页面刷新后，requisition数据可能未完成异步加载，此时调用reset(requisitionDetail)会传入未正确初始化的字段，引发组件渲染错误。

具体修复步骤 #

1. 修正qualifiersValues的赋值格式 #

确保qualifiersValues始终为数组类型，和useForm默认值类型保持一致：

const requisitionDetail: IRequisition = {
    // ... 其他字段保持不变
    qualifiersValues: requisitionId ? [requisitionId] : [], // 单个ID转为数组，空值则保留空数组
    // ... 其他字段保持不变
};

2. 确保数据加载完成后再执行reset操作 #

避免在requisition未加载完成时调用reset，添加条件判断：

// 假设requisition是异步获取的，比如从useQuery或useEffect中获取
if (requisition) {
    const requisitionDetail: IRequisition = {
        // ... 生成对象逻辑
    };
    setRequisition(requisitionDetail);
    reset(requisitionDetail);
}

3. 检查ControlledSelect组件的适配性 #

• 如果ControlledSelect是单选组件：调整useForm的defaultValues为单个空值，同时修改qualifiersValues的赋值逻辑为单个值：

  // useForm配置
  const { control, trigger, reset } = useForm({
      defaultValues: {
          deliveryLimitDate: '',
          answersUntilDate: '',
          qualifiersValues: '', // 改为单个空值
      },
      schema,
  });
  
  // 赋值逻辑
  qualifiersValues: requisitionId || '',
  

• 如果是多选组件：确认组件内部支持数组类型的选中值，若组件仅支持单个值，则需调整组件逻辑或保持数组格式并在组件内部做转换。

4. 验证表单schema的正确性 #

检查schema中是否对qualifiersValues的类型做了正确定义，比如数组类型需设置为array()，避免类型校验失败导致隐性错误。

测试验证 #

1. 页面刷新后，确认qualifiersValues始终为正确的数组/单个值类型
2. 检查下拉框是否能正确显示对应ID的选项
3. 验证刷新时不再出现TypeError错误

内容的提问来源于stack exchange，提问作者Miguel Ângelo Freitas