API数据结构调整后编辑页面提交禁用逻辑报错排查

错误原因 #

组件首次渲染时，values的初始值是空对象{}，此时values.data为undefined，直接访问values.data.name就会触发"Cannot read properties of undefined"错误。虽然后续useEffect会请求接口更新values，但组件第一次渲染时disabled的计算逻辑已经执行，所以报错。另外，如果接口返回的结构异常（比如错误响应里没有data字段），也会触发同样的问题。

解决方法 #

1. 给初始状态添加默认的data结构

把useState的初始值改成包含空data对象的结构，避免首次渲染时data为undefined：

const [values, setValues] = React.useState({ data: {} } as any);

2. 使用可选链操作符安全取值

在计算disabled和表单value时，用可选链?.避免访问undefined的属性，同时给输入框设置默认空值避免React警告：

// 提交按钮禁用条件
const disabled = (!values.data?.name || !values.data?.dimensions);

// 表单输入框调整
<Controls.Input  
    type='text'
    onChange={handleInputChange}
    name='name'
    label='Equipment Name'
    value={values.data?.name || ''}
/> 
<Controls.Input  
    type='text'
    onChange={handleInputChange}
    name='dimensions'
    label='Equipment Dimensions'
    value={values.data?.dimensions || ''}
/>  

3. 结合加载状态优化

在请求数据的loading阶段直接禁用按钮，避免加载过程中出现无效判断：

const disabled = loading || (!values.data?.name || !values.data?.dimensions);

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