从回调函数呈现-打字稿

问题描述 投票:0回答:1

[使用graphql查询时,我正在调用showUsers函数,该函数应该显示所有用户(样式已完成,以便它们可以显示为框)。但是,目前没有任何显示。

我使用的是功能组件,而不是类组件。

此功能在我的handleSubmitForm之后被调用。我在这里叫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>
  );
};

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

我尝试过:

const ShowUsers: React.FunctionComponent<ShowUsersProps> = ({
  data,
  numberOfUsers,
}) => {
  console.log('Hello');
  for (var i = 0; i < numberOfUsers; i++) {
    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('Whats the Id', userName);
    return(
      <View style={styles.friends}>
        <View style={styles.item}>
         <Text>{userName}</Text>
        </View>
      </View>
    )
  }      
}

但是我在ShowUsers:上得到了这个>

Type '({ data, numberOfUsers, }: PropsWithChildren<ShowUsersProps>) => Element | undefined' is not assignable to type 'FunctionComponent<ShowUsersProps>'.
  Type 'Element | undefined' is not assignable to type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> | null'.

[使用graphql查询时,我正在调用showUsers函数,该函数应该显示所有用户(样式已完成,以便它们可以显示为框)。但是,目前没有任何显示。我...

javascript reactjs typescript react-native render
1个回答
0
投票

[使用graphql查询时,我正在调用showUsers函数应该向所有用户显示(样式已完成,以便他们可以显示为方框)。但是,目前没有任何显示。

© www.soinside.com 2019 - 2024. All rights reserved.