如何将setState函数作为参数传入其他函数？附代码重构需求

1. 在handlers文件中定义抽离后的函数 #

新建（或修改）handlers/auth.ts文件，把原函数的依赖项（setLoading、navigation、email）都作为参数传入，同时补全TypeScript类型：

// handlers/auth.ts
import { NavigationProp } from '@react-navigation/native';
// 假设你的导航栈类型是RootStackParamList，根据实际项目调整
import { RootStackParamList } from '../navigation/types';

export const handleSignIn = async (
  email: string,
  setLoading: React.Dispatch<React.SetStateAction<boolean>>,
  navigation: NavigationProp<RootStackParamList>
) => {
  setLoading(true);
  const { error } = await supabase.auth.signInWithOtp({ email });

  if (error) {
    console.log(error);
    setLoading(false);
  } else {
    setLoading(false);
    // 原代码中的userEmail替换为传入的email即可，若需组件内其他状态也可作为参数传入
    navigation.navigate('VerifyOtp', { email });
  }
};

2. 在组件中调用抽离后的函数 #

在屏幕组件中导入该函数，在需要触发认证的场景（比如按钮点击）调用时，传入组件内的setLoading、navigation实例和用户输入的email：

// 你的屏幕组件文件
import { handleSignIn } from '../handlers/auth';
import { useState } from 'react';
import { useNavigation } from '@react-navigation/native';

const SignInScreen = () => {
  const [loading, setLoading] = useState(false);
  const [email, setEmail] = useState('');
  const navigation = useNavigation();

  const onSignInPress = () => {
    handleSignIn(email, setLoading, navigation);
  };

  // 组件渲染逻辑...
};

关键说明 #

• setLoading是React返回的状态更新函数，可直接作为参数传递，它在组件生命周期内是稳定的，无需额外用useCallback包裹（除非组件存在频繁重渲染场景）。
• 如果原函数还有其他状态依赖（比如错误提示的setError），只需在函数参数中添加对应的状态更新函数即可，逻辑和setLoading完全一致。

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