React Native扫码APP POST提交报this.state.userid未定义错误求助

数据老陈

2026-8-29

报错直接原因

你遇到的undefined is not an object (evaluating '_this.state.userid')错误，是因为在函数式组件中错误使用了类组件的this.state语法。你编写的Scanner是React函数组件，不存在类组件的this实例，也没有this.state挂载对象，所有通过useState定义的状态可以直接通过变量名访问，不需要通过this.state取值。

代码中存在的其他问题

Register函数中fetch请求写法错误：没有通过.then()或者async/await处理异步响应，直接把响应处理逻辑写在fetch语句外层，try/catch没有和异步逻辑正确绑定，根本无法捕获请求错误、处理返回结果。
OK按钮的onPress逻辑语法错误：navigation.navigate的路由名和传参被错误包裹在同一个字符串内，同时用逗号表达式串联两个执行逻辑的写法不规范，容易出现执行顺序异常。
时间获取逻辑不合理：当前时间在组件首次挂载时就生成并存入状态，不是用户扫码后点击确认的实际时间。
请求配置冗余错误：fetch中添加的mode:'no-cors'在React Native环境下不需要，开启后会导致无法正常读取响应内容；Access-Control-Allow-*前缀的头是服务端返回的CORS配置头，前端在请求头中设置没有任何作用。
状态命名不规范：userid状态对应的更新函数命名为setText，语义不匹配，后续维护容易出错。

修正方案

首先修正状态定义的命名，保持语义一致：

// 原代码：const [userid, setText] = useState('Not yet scanned')
const [userid, setUserid] = useState('Not yet scanned')
// 对应扫码回调里的更新方法也同步修改
const handleBarCodeScanned = ({ type, data }) => {
  setScanned(true);
  setUserid(data)
};

重写Register请求函数，移除错误的this.state写法，用async/await正确处理异步请求：

const Register = async () => {
  // 直接访问函数组件作用域内的userid变量即可
  const insertAPIURL = "https://你的服务域名/api/insert.php";
  const headers = {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  }
  const submitData = {
    userid: userid,
  };

  try {
    const fetchRes = await fetch(insertAPIURL, {
      method: 'POST',
      headers: headers,
      body: JSON.stringify(submitData)
    })
    const responseData = await fetchRes.json();
    alert(responseData[0].Message);
  } catch (error) {
    alert("请求失败：" + error);
  }
}

修正OK按钮的点击逻辑，修复导航传参错误，建议把时间生成逻辑移到点击确认时触发，保证时间是用户操作的实际时间：

// 先把时间生成逻辑抽为独立函数
const formatCurrentTime = () => {
  const date = new Date().getDate();
  const month = new Date().getMonth() + 1;
  const year = new Date().getFullYear();
  const hours = new Date().getHours();
  const min = new Date().getMinutes();
  const sec = new Date().getSeconds();
  return `${date}/${month}/${year} ${hours}:${min}:${sec}`
}

// 按钮部分修正后写法
{
  scanned && <Button 
    title={'OK'} 
    onPress={() => {
      // 点击确认时再生成最新时间
      setCurrentDate(formatCurrentTime())
      // 修正导航写法：第一个参数是路由名，第二个参数是传参对象
      navigation.navigate('Home', { userid: userid })
      // 提交数据
      Register()
    }} 
  /> 
}

删掉组件挂载时获取时间的冗余useEffect即可，避免生成无用的初始时间。

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