React中触发Invalid hook call错误，求排查解决方案

你把一个包含React Hook的函数组件当成普通工具函数在事件处理逻辑里调用了，直接违反了React Hook的调用规则。

facebookLogin函数里使用了useState，这意味着它是一个React函数组件，必须像组件一样被渲染（比如用<facebookLogin />），而不能在普通函数（比如getUserInfo）里直接调用执行。当你在点击事件里调用facebookLogin()时，useState会在组件外部的普通函数中执行，触发"Invalid hook call"错误。

根据你的需求（点击按钮触发Facebook登录并获取用户信息），需要重构代码：

1. 重构facebookLogin为普通异步登录函数 #

去掉函数内的Hook，把它改成纯工具函数，负责执行登录逻辑：

// facebookLogin.js
export default async function facebookLogin() {
  // 这里替换为实际的Facebook登录SDK调用逻辑
  try {
    // 示例：调用FB登录API获取用户信息
    const loginResult = await /* 你的Facebook登录代码 */;
    return loginResult.user;
  } catch (error) {
    console.error('Facebook登录失败:', error);
    return null;
  }
}

2. 在NetworksList组件内维护状态并调用登录函数 #

把状态管理移到NetworksList组件的顶层作用域，点击事件中调用重构后的登录函数：

import { useState } from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
import facebookLogin from '../functions/facebookLogin';

function NetworksList(props) {
  // 在组件顶层使用Hook维护用户状态
  const [user, setUser] = useState(null);

  const getUserInfo = async () => {
    console.log('beforeLogin');
    const userData = await facebookLogin();
    console.log(userData);
    // 更新组件状态
    setUser(userData);
  };

  return (
    <View style={styles.NetworksList}>
      <TouchableOpacity onPress={getUserInfo}>
        <Text style={styles.whiteTitle}>PushToFB</Text>
      </TouchableOpacity>
      {/* 可选：渲染用户信息 */}
      {user && <Text>当前用户：{JSON.stringify(user)}</Text>}
    </View>
  );
}

// 记得补充styles定义
const styles = {
  NetworksList: { /* 你的样式 */ },
  whiteTitle: { /* 你的样式 */ }
};

export default NetworksList;

React Hook（如useState、useEffect等）只能在以下场景调用：

• 函数组件的顶层作用域（不能嵌套在循环、条件、普通函数里）
• 自定义Hook的顶层作用域

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