内返

Question

根据graphql查询的结果，我在函数中渲染了一些项目。contact

export const Whitelist: React.FunctionComponent = (props) => {
  const [userData, setUserData] = useState<UsersQueryHookResult>('');

  const called = () => {
    console.log('inner return')
  }
  const contacts = () => {
    console.log('running');
    const { loading, error, data } = useUsersQuery({
      variables: {
        where: { id: 34 },
      },
    });
    console.log('DATA COMING', data);
    return (
      <View style={styles.allUsers}>
        {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}>
                  {called()}  
                <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}>
                    <Icon
                      name="plus"
                      size={moderateScale(20)}
                      color="black"
                    />
                  </Button>
                </View>
              </View>
            );
          },
        )}
      </View>
    );
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <Container style={{ flex: 1, alignItems: 'center' }}>
        <Item style={styles.addToWhitelist}>
          <Icon
            name="add"
            onPress={() => navigation.navigate('AddContactTry')}
          />
          <Text style={styles.addToContactTitle}>Add contact</Text>
        </Item>
        <Text onPress={() => navigation.navigate('Home')}>Zurück</Text>
        {contacts()}
      </Container>
    </SafeAreaView>
  );
};

但是，我没有看到任何项目被渲染。如果我在 contacts(例如缩略图)，我能够看到。但是，我没有看到第二个返回的任何东西。我如何解决这个问题？

我尝试使用 {called()} 在内部返回调试。它应该显示一个日志，但它没有。

Answer 1

你应该等待请求完成。你的请求被发送，紧接着你的返回被执行，由于数据是空的，所以没有要渲染的内容。声明你的函数async并等待请求完成