TouchableOpacity onPress调用订座函数触发Invalid Hook Call错误如何解决

错误原因 #

• 核心违规点：违反React Hook调用规则。useState、useEffect仅允许在React函数组件顶层渲染阶段、或自定义Hook内部调用，你将generalBooking放在用户点击触发的seat1Booking事件回调中执行，属于非渲染阶段调用Hook，直接触发报错。
• 逻辑缺陷：你需求是点击时才触发订座请求，但generalBooking中使用的useEffect是渲染副作用钩子，只会在组件挂载/依赖更新时执行，完全不符合点击触发的交互逻辑。你之前直接调用未报错只是因为调用时机符合Hook规则，但实际也拿不到接口返回的真实消息，拿到的只是useState设置的初始值0，属于运行正常的假象。

修复方案 #

1. 重构generalBooking为纯异步请求函数 #

删除所有Hook相关代码，直接返回接口返回的消息：

const generalBooking = async (seat, uid, vid, tc_id) => {
  const response = await fetch(
    `http://192.168.8.100/dbops/actions/make_booking.php?seat=${seat}&uid=${uid}&vid=${vid}&tc_id=${tc_id}`
  );
  const result = await response.json();
  return result.message;
};

2. 修改seat1Booking支持异步逻辑 #

因为网络请求是异步操作，需要加async/await等待请求完成后再弹出提示：

// 注意：函数前加async关键字，uid、vid、tc_id直接引用组件内部的状态/Props即可
const seat1Booking = async () => {
  const msg = await generalBooking(1, uid, vid, tc_id);
  Alert.alert(msg);
};

3. 组件绑定无需改动 #

原来的TouchableOpacity绑定逻辑保持不变即可：

return (
    <Screen style={{ paddingBottom: 5 }}>
          {/* Seat 1 starts */}
          <TouchableOpacity style={styles.seat} onPress={seat1Booking}>
            <MaterialCommunityIcons name="seat" size={40} color={seat1Color} />
            <Button title="1" style={{ width: 20 }} color={seat1Color} />
          </TouchableOpacity>
          {/* Seat 1 ends */}
    </Screen>
)

内容的提问来源于stack exchange，提问作者Julius Peter Odeke