POST 方法：错误：无效的挂钩调用。 Hooks 只能在函数组件的主体内部调用答案

【问题标题】：POST METHOD: Error: Invalid hook call. Hooks can only be called inside of the body of a function componentPOST 方法：错误：无效的挂钩调用。 Hooks 只能在函数组件的主体内部调用
【发布时间】：2021-09-13 11:16:22
【问题描述】：

我想在按下 TouchableOpacity 时提醒来自 API 的消息。我有一个处理seatBooking 的函数和为消息调用seatBooking 函数的单个函数。这是我的代码

const generalBooking = (seat, uid, vid, tc_id) => {
    const [msg, setMsg] = useState(0);
    useEffect(() => {
      (async () => {
        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();
        setMsg(result.message);
        // alert(result.message);
      })();
    }, []);

    return msg;
  };

function seat1Booking(seat1, uid, vid, tc_id) {
    const msg = generalBooking(1, uid, vid, tc_id);
    Alert.alert(msg);
  }

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>
)

当我在console.log(seat1booking()) 外面登录时，generalBooking 和个人 seat1Booking 功能正常，但是当我将它传递给 TouchableOpacity 时，它会发出警告

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
....

我尝试阅读了许多链接Error Invalid hook call. Hooks can only be called inside of the body of a function component、How to fix React(TypeScrtipt) error "Invalid hook call."?，包括错误消息中提供的链接都是徒劳的。

问题可能是调用处理座位预订的单个函数的函数，例如，seat1Booking 还是 generalBooking 函数？请指教

【问题讨论】：

标签： react-native react-hooks use-effect

【解决方案1】：

你不能在函数调用中使用useEffect，在这种情况下你也不需要。

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;
};

const seat1Booking = async (seat1, uid, vid, tc_id) => {
  const msg = generalBooking(1, uid, vid, tc_id);
  Alert.alert(msg);
}

【讨论】：

谢谢@Hazout。我是 React Native 的新手，请您提供关于我的代码 sn-p 的正确格式。谢谢。

【解决方案2】：

我设法解决了这个问题，就是这样，

const generalBooking = async (seat, uid, vid, tc_id) => {
    // const [msg, setMsg] = useState(0);
    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();
    // setMsg(result.message);
    Alert.alert("Booking Status", result.message);
  };

  useEffect(() => {
    return () => {
      seatBooking(seat, uid, vid, tc_id);
    };
  }, []);

const seat1Booking = (seat, uid, vid, tc_id) => {
    seatBooking(1, uid, vid, tc_id);
  };

感谢@Hazout 的提示，因为它指导了我的搜索。

【讨论】：