从有条件渲染的地图中删除项目

Question

我有这个组件，我传递了graphql查询返回的数据，并相应地渲染项目。

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

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

    const deleteContact = (relationId: number) => {
        console.log('Relation id', relationId);
        deleteUserRelationMutation({
            variables: { id: relationId}
        })


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

[按下删除按钮后，我进行了变异，并从后端删除了该特定用户。突变工作正常。我也收到警报。但是，针对该特定已删除用户的有条件渲染的项目不会消失。

是否可以通过某种方式从deleteContact函数中的数组中删除该项目，以使其不再从地图中渲染？还是在每次运行突变时都有其他方法可以更新数据？

Answer 1

您可以在本地从数组中拼接项目。请检查下面的代码。