React Native使用Fetch API提交表单提示变量未定义报错

架构老林

2026-8-30

问题排查结论

触发firstname is not defined报错的核心原因有2个：

所有表单字段值统一存储在inputs状态对象中，但submitData提交方法构造请求体时，直接引用了不存在的独立变量firstname/lastname/email/note，作用域内无对应变量声明，直接触发引用错误。
提交成功的回调中错误使用了props.navigation，组件入参已经直接解构拿到了navigation对象，不存在props变量，就算修复第一个问题，这里也会触发新的未定义报错。

修复步骤

直接修改submitData方法即可，修复点如下：

构造请求体时，从inputs状态对象中读取对应字段值
替换错误的props.navigation为已解构的navigation
补全加载状态的开关逻辑，避免提交时加载动画一直显示或不显示

修正后的submitData方法代码：

const submitData = ()=>{
  setLoading(true);
  fetch("https://flow.simpsimp.ai:2021/react/contact",{
      method:"POST",
      headers:{
        'Content-Type': 'application/json'
      },
      body:JSON.stringify({
        firstname: inputs.firstname,
        lastname: inputs.lastname,
        email: inputs.email,
        note: inputs.note
      })
  })
  .then(res=>res.json())
  .then(data=>{
      setLoading(false);
      alert(`${data.firstname} 保存成功`);
      navigation.navigate("Home")
  })
  .catch(err=>{
    setLoading(false);
    alert("提交失败，请稍后重试")
  })
};