在循环内渲染和返回

Question

In my code, I call a function showUsers . This function displays all the users in a styled box. For now, the numberOfUsers passed into it is 1, as confirmed by console.logs as well.

So the loop should only runs once. However, all these console.logs are repeated twice. The output values remain the same. Why is this so?

         console.log('Number of Users in Loop: ', numberOfUsers);
         console.log('Whats the Id', userId);
         console.log('UserName', userName);
         console.log('i: ', i);

Code:

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

UPDATED CODE:

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

  const [errorMessage, setErrorMessage] = useState('');
  const [isSubmitted, setIsSubmitted] = useState(false);
  const [userData, setUserData] = useState<UsersLazyQueryHookResult>('');
  const [numberOfUsers, setNumberOfUsers] = useState('');

  const validationSchema = emailValidationSchema;

   const showUsers = React.useCallback(
     (data: UsersLazyQueryHookResult, numberOfUsers: Number) => {
      if (data){
       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);
         return (
           <View style={styles.friends}>
             <View style={styles.item}>
               <Text style={styles.userName}>{userName}</Text>
               <View style={styles.addButtonContainer}>
                 <Button
                   onPress={() => {
                     addFriend(Number(data.users.nodes[i].id));
                     setIsSubmitted(false);
                   }}>
                 </Button>
               </View>
             </View>
           </View>
         );
       }}
     },
     [createUserRelationMutation, userData, numberOfUsers],
   );

  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);
        }
      }
    },
    [addFriend],
  );



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

  const handleSubmitForm = React.useCallback(

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


  if (!addingFriendLoading && isMutationCalled) {
    if (addingFriendError) {
      setErrorMessage(addingFriendError.message);
      Alert.alert('Unable to Add Friend');
    }
  }

  return (
    <Modal
      visible={showAddFriendEmailPage}
      animationType="slide"
      transparent={true}>
      <SafeAreaView>
        <View style={styles.container}>
          <View style={styles.searchTopContainer}>
            <View style={styles.searchTopTextContainer}>
              <Text
                style={styles.searchCancelDoneText}
                onPress={() => {
                 toggleShowPage()
                  setIsSubmitted(false);
                  setUserData(null);
              }}
              >
                Cancel
              </Text>
              <Text style={styles.searchTopMiddleText}>
                Add Friend by Email
              </Text>
              <Text style={styles.searchCancelDoneText}>Done</Text>
            </View>
            <View>
              <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}>Search </Text>
                      </Button>
                    </View>
                  </View>
                )}
              </Formik>
            </View>
            {isSubmitted && showUsers(userData, Number(numberOfUsers))}    
          </View>
        </View>
      </SafeAreaView>
    </Modal>
  );
};

Answer 1

You are also calling setUserData from getFriendId , so it will update userData

const getFriendId = React.useCallback(
    ....
    setUserData(data);

So it will invoke render and useEffect

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

You can comment out useEffect and check no of console.log