使用FlatList时无法提交表单

Question

以前，我是使用另一个名为UserList的组件来渲染和映射某些数据的。但是，现在我将其更改为FlatList

当我使用{/* <UserList onSendRequest={onSendRequest} data={userData}></UserList> */}时，每次单击按钮时，都会成功调用handleSubmit函数。

但是，现在我正在使用FlatList。当我单击按钮时，什么也没有发生。句柄提交未运行，并且从flatList中看不到任何内容。我在做什么错了？

  return (
    <SafeAreaView>
      <View>
        <View style={styles.searchTopContainer}>
          <View style={styles.searchTopTextContainer}>
            <Text>
              Cancel
            </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.input}
                      fieldType="input"
                      icon="user"
                      placeholderText="Email or Phone Number or Name"
                    />
                    <ErrorMessage
                      name="input"
                      render={(msg) => (
                        <Text style={styles.errorText}>{msg}</Text>
                      )}
                    />
                  </View>
                  <View style={styles.buttonContainer}>
                    <Button
                      rounded
                      style={styles.searchButton}
                      onPress={handleSubmit}>
                      <Text style={styles.searchButtonText}>Search </Text>
                    </Button>
                  </View>
                </View>
              )}
            </Formik>
          </View>
          {/* <UserList onSendRequest={onSendRequest} data={userData}></UserList> */}
          {userData !== null && 
          <FlatList
            data={userData.users}
            horizontal={false}
            renderItem={({ item }) => (
              <SingleUser
                user={item}
                onSendRequest={onSendRequest}
              />
            )}
            keyExtractor={(item) => item.id.toString()}
          />
            }
        </View>
      </View>
    </SafeAreaView>
  );
};

UserList.tsx：

export const UserList: React.FunctionComponent<UserProps> = ({
  data,
  onSendRequest,
}) => {
  if (!data) return null;
  return (
    <View style={styles.users}>
      {data.users.nodes.map(
        (item: { firstName: string; lastName: string; id: number }) => {
          const userName = item.firstName.concat(' ').concat(item.lastName);
          return (
            <View style={styles.item} key={item.id}>
              <Thumbnail
                style={styles.thumbnail}
                source={{
                  uri:
                    'https://cdn4.iconfinder.com/data/icons/avatars-xmas-giveaway/128/afro_woman_female_person-512.png',
                }}></Thumbnail>
              <Text style={styles.userName}>{userName}</Text>
              <View style={styles.addButtonContainer}>
                <Button
                  rounded
                  style={styles.addButton}
                  onPress={() => onSendRequest(Number(item.id))}
                  >
                  <Icon name="plus" size={moderateScale(20)} color="black" />
                </Button>
              </View>
            </View>
          );
        },
      )}
    </View>
  );
};