Javascript 每次进入屏幕时重新蚀刻数据

我在一个屏幕上运行一个查询，然后根据查询结果，通过

UserList

组件呈现一些项目。使用UserList组件中的一个按钮，我运行了一个变异（删除一个项目）。在这种情况下，由于零部件是链接的。我传递了

deleteContact

函数，并在其中使用了

refetch（）

。因此，当我删除一个用户时，用户界面会自动更新，删除的用户也会被删除

但是，我有另一个要添加联系人的组件，

AddContact

，它并没有真正链接到

白名单

组件（导航除外）。因此，当我添加一个用户并返回到

白名单

屏幕时，ui不会更新。未呈现新用户。是否有任何方法可以在每次重新访问

白名单

屏幕时调用refetch（）

export const Whitelist: React.FunctionComponent = (props) => {

  // useEffect(() => {
  //   refetch()
  // }, []);

  const [deleteUserRelationMutation] = useDeleteUserRelationMutation({
    onCompleted: (index: number) => {
      refetch();
      Alert.alert('Contact Deleted');
    },
    onError: _onDeleteUserRelationError
  });

  const onDeleteContact = (relationId: number) => {
    deleteUserRelationMutation({
      variables: { id: relationId}
  })
  };

  const { loading, error, data, refetch } = useUsersQuery({
    variables: {
      where: { id: 1 },
    },
  });

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <Container style={{ flex: 1, alignItems: 'center' }}>
<Item style={styles.addToWhitelist}>
          <Icon name="add" onPress={() => navigation.navigate('AddContact')} />
          <Text >Add contact</Text>
        </Item>
        <ContactList data={data} onDeleteContact={onDeleteContact}></ContactList>
      </Container>
    </SafeAreaView>
  );
};

---

它给了我

console.log（'refetching data'）每次我返回屏幕时，但ui没有更新，所以我猜它实际上没有重新绘制
 您可以将钩子中的
fetchPolicy
设置为
cache and network
或
network only
，以便在访问用户列表页面时更新该页面

缓存和网络

如果将
fetchPolicy
设置为
cache and network
，apollo将首先显示缓存的数据，并在后台进行网络调用以更新缓存。一旦收到响应，它将更新缓存，而缓存又会重新呈现调用钩子的组件。当组件重新呈现时，将更新用户列表

优点：没有显示加载器。给人以“快速站点”的印象

缺点：在缓存更新之前，将显示可能过时的数据（持续时间取决于查询解析的速度）

这对于不希望数据频繁更改的页面非常有用。如果添加/删除用户不是频繁操作，则可以使用此选项

仅限网络

如果将
fetchPolicy
设置为
networkonly
，apollo将始终进行网络调用以获取数据。它永远不会将数据存储在缓存中

优点：显示保证最新的数据

缺点：需要在网络呼叫进行时显示加载器。给人一种“慢站点”的印象

如果添加/删除用户是应用程序中的常见操作，那么这是一个更好的选择，因为它可以确保始终显示最新数据

您可以在官方文档中阅读有关获取策略的更多信息
console.log（'component name'）
返回之前（

-检查是否呈现组件…如果是，更新/重新配置问题我在白名单返回之前添加了日志。如果我从这里导航到另一个屏幕，然后返回，我应该会看到日志，但我看不到它。这意味着不是每次都呈现数据。@xadman那么这是更高级别的问题-管理视图/屏幕-r外部使用的？redux？@xadm暂时不使用redux。导航使用的是来自

@react Navigation/native'；

的useNavigation。不知怎的，日志现在可以工作了，所以它正在渲染，但没有重新蚀刻。还尝试使用UseFocuseEffect，但也不起作用。@xadm

export const ContactList: React.FunctionComponent<UserProps> = ({ data, onDeleteContact }) => {

  if (!data) return null;
  return (
    <View style={styles.users}>
    {data.users.nodes[0].userRelations.map(
      (item: { relatedUser: RelatedUser, type: RelationType, id: number}) => {
        const userName = item.relatedUser.firstName.concat(' ').concat(item.relatedUser.lastName);
        return (
          <View style={styles.item} key={item.id}>
              <View style={styles.nameNumber}>
            <Text style={styles.userName}>{userName}</Text>
            </View>
            <View style={styles.deleteButtonContainer}>
              <Button
                onPress={() => onDeleteContact(item.id)}
                >
              </Button>
            </View>
          </View>
        );
      },
    )}
  </View>
  );
};

useFocusEffect(
  React.useCallback(() => {
    console.log('refetching data');
    refetch();
  }, [])
);