React表单提交Shippo API报Cannot read properties of undefined错误

报错核心原因是form状态值为undefined时，代码直接访问其下的name、street1等属性，触发类型错误，共有两个高频触发场景：

• 组件初始化阶段：useState(props.form)直接取props的form值作为初始状态，如果父组件调用组件时未传入form prop，初始form值就是undefined，首次渲染执行到value={form.name}直接抛错。
• 接口提交后更新阶段：.then(json => setForm(json.form))错误读取了Shippo接口不存在的form嵌套字段，将undefined赋值给form状态，触发渲染报错。

另外代码里还存在4处会导致后续报错的逻辑问题：

• errors字段未做初始化，就算form是对象，访问form.errors.name时也会因为errors是undefined抛错
• Shippo接口鉴权头写法错误，环境变量被写死在字符串里不会被解析
• 请求体多套了一层form结构，不符合Shippo接口的参数要求
• street1输入框下方的错误提示判断逻辑写错，重复判断了name字段的错误

1. 给form状态配置兜底初始值 #

替换原有useState初始化逻辑，提前定义好表单全量字段的默认值，兼容父组件未传prop、接口返回结构异常的场景：

const [form, setForm] = useState({
  name: '',
  street1: '',
  // 补全自身业务需要的其他地址字段，比如city、state、zip、country等
  errors: {},
  ...props.form // 父组件传入的初始值优先级高于默认值
})

如果想做双重保险，可以在所有访问form属性的位置加可选链操作符，比如value={form?.name}，彻底阻断undefined读属性的报错路径。

2. 修正接口提交与响应处理逻辑 #

替换原有submit方法，修正鉴权、请求体结构、响应解析的错误：

const submit = async e => {
  e.preventDefault()
  try {
    const res = await fetch('https://api.goshippo.com/addresses/', {
      method: 'POST',
      body: JSON.stringify(form), // 直接传表单字段，不需要额外套form层
      headers: { 
        'Content-Type': 'application/json', 
        'Authorization': `ShippoToken ${process.env.SHIPPO_TOKEN}` // 正确拼接环境变量
      },
    })
    const resData = await res.json()
    if (res.ok) {
      setForm(prev => ({...prev, ...resData, errors: {}}))
    } else {
      setForm(prev => ({...prev, errors: resData}))
    }
  } catch (err) {
    console.error('地址提交异常:', err)
  }
}

3. 修正错误提示渲染逻辑 #

将两处错误提示的判断逻辑修正，避免字段判断错误、undefined访问问题：

{/* 姓名输入框错误提示 */}
{form.errors?.name && <p>{form.errors.name}</p>}

{/* 地址第一行输入框错误提示，替换原来错误的name判断 */}
{form.errors?.street1 && <p>{form.errors.street1}</p>}

后续其他字段的错误提示，都按照这个逻辑对应修改字段名即可。

内容的提问来源于stack exchange，提问作者pelotador.1