我使用的是firebase v7.21.1我有一个问题,当我从我的webApp中删除一个文件时,fie会消失,但当我重新加载页面时,它仍然在那里,当我点击它时,它会给我一条错误消息:代码403,权限被拒绝,文件仍然在我的firebase数据库中.有人有过这个问题吗?判断下面的代码.

import React from "react"
import { Container } from "react-bootstrap"
import { useFolder } from "../../hooks/useFolder"
import AddFolderButton from "./AddFolderButton"
import AddFileButton from "./AddFileButton"
import Folder from "./Folder"
import File from "./File"
import Navbar from "./Navbar"
import FolderBreadcrumbs from "./FolderBreadcrumbs"
import { useParams, useLocation } from "react-router-dom"
import { useState, useContext, useEffect } from "react";
import { storage } from "../../firebase"



export default function Dashboard() {
  const { folderId } = useParams()
  const { state = {} } = useLocation()
  const [allFiles, setFiles] = useState([]);
  const { folder, childFolders, childFiles } = useFolder(folderId, state.folder)


  useEffect(() => {
    setFiles(childFiles);
  }, [childFiles]);


  const deleteFromFirebase = (url) => {
    console.log(url);
          let fileRef = storage.refFromURL(url.url);
    console.log(fileRef);
          fileRef
            .delete()
            .then(() => {
              setFiles(allFiles.filter((childFile) => childFile !== url));
              alert("File deleted successfully!");
            })
            .catch((err) => {
              console.log(err);
            });
        };

      

  return (
    
    
    <>
    
      <Navbar />
      <Container fluid>
        <div className="d-flex align-items-center">
          <FolderBreadcrumbs currentFolder={folder} />
          <AddFileButton currentFolder={folder} />
          <AddFolderButton currentFolder={folder} />
        </div>
        {childFolders.length > 0 && (
          <div className="d-flex flex-wrap">
            {childFolders.map(childFolder => (
              <div
                key={childFolder.id}
                style={{ maxWidth: "250px" }}
                className="p-2"
              >
                <Folder folder={childFolder} />
              </div>
            ))}
          </div>
        )}

        {childFolders.length > 0 && childFiles.length > 0 && <hr />}
        {childFiles.length > 0 && (
          <div className="flex-wrap">
            {allFiles.map(childFile => ( 
              <div class = "row">
              <div
                key={childFile.id}
                style={{ Width: "auto" }}
                className="p-2"
              >
                <File file={childFile} />
                </div>
                <div style={{ padding: "8px" }}>
                <button type="button"  class="btn btn-primary" onClick={() => deleteFromFirebase(childFile)} confirm="Are your sure?">delete</button>
                </div>
              </div>
            ))}
          </div>
        )}
      </Container>
    </>
  )
}

我在安全规则中使用了这些条件,问题仍然存在.

service cloud.firestore { 
match /databases/{database}/documents { 
match /{document=**} { 
allow read; 
allow write; 
allow delete; } } } 
service firebase.storage {
  // The {bucket} wildcard indicates we match files in all Cloud Storage buckets
  match /b/{bucket}/o {
    // Match filename
    match /{allPaths=**} {
      allow read;
      allow write;
    }
  }
}

推荐答案

我不得不从firestore数据库中添加或删除,这对我来说现在起作用了…:

 const deleteFromFirebase = async (fileDoc) => {
    try {
      await storage.refFromURL(fileDoc.url).delete();
      await fileDoc.ref.delete();
      setFiles(allFiles.filter((childFile) => childFile !== fileDoc));
      alert("File deleted successfully!");
    } catch (e) {
      alert(`Error while deleting file ${e.message}`);
    }
  };

Javascript相关问答推荐

将本机导航路由react 到导航栏中未列出的屏幕?

无法检测卡片重叠状态的问题

实现JS代码更改CSS元素

PDF工具包阿拉伯字体的反转数字

如何在箭头函数中引入or子句?

当用户点击保存按钮时,如何实现任务的更改?

让chart.js饼图中的一个切片变厚?

将异步回调转换为异步生成器模式

MarkLogic-earch.suggest不返回任何值

当标题被点击时,如何使内容出现在另一个div上?

当代码另有说明时,随机放置的圆圈有时会从画布上消失

使用类型:assets资源 /资源&时,webpack的配置对象&无效

try 将Redux工具包与MUI ToggleButtonGroup组件一起使用时出错

无法读取未定义的属性(正在读取合并)-react RTK

有没有办法更改Chart.js 3.x.x中主要刻度的字体?

为什么我的SoupRequest";被重置为初始值,以及如何修复它?

如何使用useparams从react路由中提取id

使用导航时,路径的所有子组件都必须是路径

更改所有验证组件文本和背景 colored颜色

将包含数字字符的新字符串与现有数字字符串合并