Javascript 用于循环多次运行

运行Graphql查询后，我从

getUserId

调用一个

showUsers

函数，该函数应该显示样式框中的所有用户

目前，在我的

showUsers

功能中，即使

'Number of Users in Loop:'，numberOfUsers

是

1

，我也会得到多个（3-4）console.log

console.log('Whats the Id', userId);
console.log('UserName', userName);
console.log('LOOP');

我不明白我做错了什么。也许是美国的问题

以下是我的完整代码：

export const Page: React.FunctionComponent<PageProps> = ({
  toggleShowPage,
  showAddFriendEmailPage,
}) => {
  const initialValues: FormValues = {
    email: '',
  };

  const [errorMessage, setErrorMessage] = useState('');
  const [userData, setUserData] = useState<UsersLazyQueryHookResult>('');
  const [numberOfUsers, setNumberOfUsers] = useState('');
  const validationSchema = emailValidationSchema;

  useEffect(() => {
    setUserData(userData);
    setNumberOfUsers(numberOfUsers);
  }, [userData, numberOfUsers]);


  const showAlert = () => {
    Alert.alert('Friend Added');
  };

  useEffect(() => {
    if (showAddFriendEmailPage) return;
    initialValues.email = '';
  }, [showAddFriendEmailPage]);

  const _onLoadUserError = React.useCallback((error: ApolloError) => {
    setErrorMessage(error.message);
    Alert.alert('Unable to Add Friend');
  }, []);

  const [
    createUserRelationMutation,
    {
      data: addingFriendData,
      loading: addingFriendLoading,
      error: addingFriendError,
      called: isMutationCalled,
    },
  ] = useCreateUserRelationMutation({
    onCompleted: (data: CreateUserRelationMutationResult) => {
      showAlert();
    },
  });

   const showUsers = React.useCallback(
     (data: UsersLazyQueryHookResult, numberOfUsers: Number) => {
       for (var i = 0; i < numberOfUsers; i++) {
        console.log('Number of Users in Loop: ', numberOfUsers);
         const userId = data.users.nodes[i].id;
         const userName = ((data.users.nodes[i].firstName).concat(' ')).concat(data.users.nodes[i].lastName);
         console.log('Whats the Id', userId);
         console.log('UserName', userName);
         console.log('Loop');
         return(
           <View style={styles.friends}>
             <View style={styles.item}>
              <Text>{userName}</Text>
             </View>
           </View>
         )
       }      
     },
     [createUserRelationMutation],
   );

  const addFriend = React.useCallback(
    (id: Number) => {
      console.log('Whats the Id', id);
      createUserRelationMutation({
        variables: {
          input: { relatedUserId: id, type: RelationType.Friend, userId: 7 },
        },
      });
    },
    [createUserRelationMutation],
  );

  const getFriendId = React.useCallback(
    (data: UsersLazyQueryHookResult) => {
      if (data) {
        if (data.users.nodes.length == 0) {
          setErrorMessage('User Not Found');
          Alert.alert('User Not Found');
        } else {
          setUserData(data);
          setNumberOfUsers(data.users.nodes.length);
          showUsers(data, Number(numberOfUsers));
          addFriend(Number(data.users.nodes[0].id));
        }
      }
    },
    [addFriend],
  );

  const [loadUsers] = useUsersLazyQuery({
    onCompleted: getFriendId,
    onError: _onLoadUserError,
  });

  const handleSubmitForm = React.useCallback(
    (values: FormValues, helpers: FormikHelpers<FormValues>) => {
      console.log('Submitted');
      loadUsers({
        variables: {
          where: { email: values.email },
        },
      });
      values.email = '';
    },
    [loadUsers],
  );

  return (
    <Modal
      visible={showAddFriendEmailPage}
      animationType="slide"
      transparent={true}>
      <SafeAreaView>
        <View style={styles.container}>
          <View style={styles.searchTopContainer}>
              <Formik
                initialValues={initialValues}
                onSubmit={handleSubmitForm}
                validationSchema={validationSchema}>
                {({ handleChange, handleBlur, handleSubmit, values }) => (
                  <View style={styles.searchFieldContainer}>
                    <View style={styles.form}>
                      <FieldInput
                        handleChange={handleChange}
                        handleBlur={handleBlur}
                        value={values.email}
                        fieldType="email"
                      />
                      <ErrorMessage
                        name="email"
                        render={msg => (
                          <Text style={styles.errorText}>{msg}</Text>
                        )}
                      />
                    </View>
                    <View style={styles.buttonContainer}>
                      <Button
                        rounded
                        style={styles.button}
                        onPress={handleSubmit}>
                        <Text style={styles.text}>Add Friend </Text>
                      </Button>
                    </View>
                  </View>
                )}
              </Formik>
            </View>
            {showUsers(userData, Number(numberOfUsers))}
          </View>
        </View>
      </SafeAreaView>
    </Modal>
  );
};

导出常量页面：React.FunctionComponent=({
切换ShowPage，
showAddFriendEmailPage，
}) => {
常量初始值：FormValues={
电子邮件：“”，
};
常量[errorMessage，setErrorMessage]=使用状态（“”）；
const[userData，setUserData]=useState（“”）；
常量[numberOfUsers，setNumberOfUsers]=useState（“”）；
const validationSchema=emailValidationSchema；
useffect（（）=>{
setUserData（用户数据）；
设置numberOfUsers（numberOfUsers）；
}，[userData，numberOfUsers]）；
常量showAlert=（）=>{
Alert.Alert（'Friend Added'）；
};
useffect（（）=>{
如果（showAddFriendEmailPage）返回；
initialValues.email=''；
}，[showAddFriendEmailPage]）；
const\u onLoadUserError=React.useCallback（（错误：ApolloadError）=>{
setErrorMessage（error.message）；
Alert.Alert（'无法添加朋友'）；
}, []);
常数[
CreateUserRelationVariation，
{
数据：添加FriendData，
加载：添加Friendloading，
错误：添加FriendError，
叫:叫,，
},
]=UseCreateUserRelationSpection({
未完成：（数据：CreateUserRelationMutationResult）=>{
showarert（）；
},
});
const showUsers=React.useCallback(
（数据：UsersLazyQueryHookResult，numberOfUsers:Number）=>{
对于（变量i=0；i{
console.log（'什么是Id'，Id）；
CreateUserRelationVariation({
变量：{
输入：{relatedUserId:id，类型：RelationType.Friend，userId:7}，
},
});
},
[CreateUserRelationBartation]，
);
const getFriendId=React.useCallback(
（数据：UsersLazyQueryHookResult）=>{
如果（数据）{
if（data.users.nodes.length==0）{
setErrorMessage（“未找到用户”）；
Alert.Alert（“未找到用户”）；
}否则{
setUserData（数据）；
setNumberOfUsers（data.users.nodes.length）；
显示用户（数据、数量（用户数））；
addFriend（编号（data.users.nodes[0].id））；
}
}
},
[addFriend]，
);
const[loadUsers]=useUsersLazyQuery({
未完成：getFriendId，
OneError:_onLoadUserError，
});
const handleSubmitForm=React.useCallback(
（值：FormValues，助手：FormikHelpers）=>{
console.log（'Submitted'）；
负荷用户({
变量：{
其中：{email:values.email}，
},
});
values.email=''；
},
[loadUsers]，
);
返回(
{（{handleChange，handleBlur，handleSubmit，values}）=>(
(
{msg}
)}
/>
加朋友
)}
{showUsers（userData，Number（numberOfUsers））}
);
};

尝试在for循环之前记录用户数。

我也尝试过。输出是一样的，但这不是我关心的问题。我的问题是，如果numberOfUsers是1。为什么我会看到for循环中的日志3次？我建议尝试使用控制台日志测试numberOfUsers在整个函数中是否发生了变化。我真的不能重复这个问题。在循环中返回应该在第一次运行后自动停止循环。可能不在循环内返回。如果不在循环内返回，如何渲染所有对象（用户）？