不能在 React Native 中只調用一次 function？

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",
  },
});

問題是 function handleRegistration()被一次又一次地調用，導致無限循環。 我試過使用useEffect()但由於某種原因它不會使 API 調用。 我錯過了什么？

Answer 1

是的 - handleRegistration()設置為現在在每次重新渲染時運行。 如果你使用useEffect ，你可能沒有包含依賴數組（我稍后會告訴你），這也會導致它在每次重新渲染時運行。 嘗試這個：

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

注意useEffect中的空數組。 這告訴 react 只運行一次。 你可以省略它（就像你可能已經做過的那樣），它告訴 react 在每次組件重新渲染時運行它。 或者您可以將參數傳遞到數組中，當這些特定參數發生變化時，反應將觀察並運行。