从回调函数渲染-打字稿

While using a graphql query, I am calling a showUsers function which is supposed to show all the users (the stying is done so that they can appear as boxes). However, currently nothing shows up.

This function is called after my handleSubmitForm. Here I call showUsers.

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

showUsers():

   const showUsers = React.useCallback(
     (data: UsersLazyQueryHookResult, numberOfUsers: Number) => {
       for (var i = 0; i < numberOfUsers; i++) {
         const userId = data.users.nodes[i].id;
         const userName = (data.users.nodes[i].firstName).concat((data.users.nodes[i].lastName));
         return(
           <View style={styles.friends}>
             <View style={styles.item}>
              <Text>{userName}</Text>
             </View>
           </View>
         )
       }      
     },
     [createUserRelationMutation],
   );

这就是我的表格的样子。我想我必须在这里进行编辑,但不确定如何。

return (
    <Modal
      visible={showAddFriendEmailPage}
      animationType="slide"
      transparent={true}>
      <SafeAreaView>
        <View style={styles.container}>
          <View style={styles.searchTopContainer}>
            <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}>Add Friend </Text>
                      </Button>
                    </View>
                  </View>
                )}
              </Formik>
            </View>
          </View>
        </View>
      </SafeAreaView>
    </Modal>
  );
};

注意:提交表格后,我只希望它们显示在按钮下方。

评论