不能在 React Native 中只调用一次函数？

Question

我有一个带有 GraphQL 服务器的 React Native 项目。我正在使用 Apollo Client 从我的 API 获取数据。我创建了这个简单的组件，它从路由参数（形成逐步注册）中获取注册所需的所有数据，并进行修改以创建新商店。

export default function AuthRegisterStore({ navigation, route }) {
  const [
    register,
    { loading: validating, error: validationError, data: returnData },
  ] = useMutation(REGISTER, { onError: (e) => Alert.alert(String(e)) });

  const handleRegistration = () => {
    register({
      variables: {
        username: route.params.username,
        password: route.params.password,
        latitude: route.params.latitude,
        longitude: route.params.longitude,
      },
    });
  };

  handleRegistration()

  if (validating) {
    return <Loader />;
  }

  if (validationError) {
    return (
      <View style={styles.container}>
        <Text>Error</Text>
      </View>
    );
  }

  if (returnData) {
    navigation.navigate("Login", { message: "Te logueaste!" });
  }

  return null;
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
});

问题是函数handleRegistration()被反复调用，导致无限循环。我试过使用 useEffect() 但由于某种原因它不会进行 API 调用。我错过了什么？

Answer 1

是 - handleRegistration() 现在每次重新渲染时都设置为运行。如果您使用 useEffect，您可能没有包含依赖项数组（稍后我将向您展示），这也会导致它在每次重新渲染时运行。试试这个：

useEffect(() => {
  handleRegistration()
}, [])

注意 useEffect 中的空数组。这告诉我们只对运行做出一次反应。你可以省略它（就像你可能已经做过的那样），它告诉你每次组件重新渲染时对运行做出反应。或者您可以将参数传递到数组中，当这些特定参数发生变化时，反应将监视和运行。

不能在 React Native 中只调用一次函数？

Cannot call function only once in React Native?

javascript

apollo

reactjs

react-native

expo