React组件传Props报错：无法读取undefined的stepOne属性

报错根源 #

你的DVTStepperType类型中stepOne被定义为可选属性（带?），这意味着它可能是undefined。但代码里多处直接访问data.stepOne的子属性（比如checkAllFieldsAreEmpty里的data.stepOne.start_date、helperText里的data.stepOne.TG_TE_number），没有做兜底处理，导致当stepOne未初始化时触发报错。

具体解决方法 #

• 初始化stepOne为默认空对象
  要么在父组件传递data时就确保stepOne存在：

  // 父组件初始化数据
  const initialData: DVTStepperType = { stepOne: {} as StepOneData };
  

  要么在组件内部解构时给stepOne设置默认值：

  const StepOne: React.FunctionComponent<Props> = ({
    data: { stepOne = {} as StepOneData, ...restData },
    updateData,
    setPromptDisabled,
    services: [userService],
  }) => {
    // 后续直接使用stepOne变量，无需再判断undefined
  };
  

• 修复所有未做兜底的属性访问

  • 修正checkAllFieldsAreEmpty函数，确保不会访问undefined的子属性：

    const checkAllFieldsAreEmpty = () => {
      return (
        !stepOne.start_date &&
        !stepOne.end_date &&
        !stepOne.department &&
        isEmpty(stepOne.overall_contact_person) &&
        isEmpty(stepOne.representative) &&
        !stepOne.budget &&
        !stepOne.TG_TE_number
      );
    };
    

  • 修复TextField的helperText，加上可选链和默认值：

    helperText={`${data.stepOne?.TG_TE_number || 0} / ${128}`}
    

• 优化更新函数的兜底逻辑
  在updateStepOneData中，当stepOne为undefined时，先创建空对象再扩展属性：

  function updateStepOneData<T extends keyof StepOneData>(value: StepOneData[T], name: T) {
    setPromptDisabled(checkAllFieldsAreEmpty());
    updateData({
      ...data,
      stepOne: {
        ...(data.stepOne || {}), // 兜底空对象，避免undefined扩展报错
        [name]: value
      }
    })
  }
  

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