内部返回不渲染任何东西

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

您应该等待请求完成。您的请求已发送，然后您的退货将立即执行，并且由于数据为空，因此没有要呈现的内容。将您的函数声明为异步并等待请求完成