Firebase v.9 deleteDoc( ) 不执行任何操作,也不会捕获任何错误
Firebase v.9 deleteDoc( ) doesn't do anything nor catches any error
我是 React 和 Firebase 的新手,我遇到了一个问题,即没有调用删除文档函数并且没有发现任何错误。函数 deleteItemHandler( ) 执行 运行,但 deleteDoc( ) 不执行。我已经更改了规则并确保导入正确,但它仍然无法正常工作。
deleteItemHandler( ), App.jsx
//? Delete item function
const deleteItemHandler = async (id) => {
try {
await deleteDoc(doc(db, "items", id));
}
catch (error) {
console.log(error);
}
}
删除按钮,YourCard.jsx
<button
className="btn btn-danger ms-2"
onClick={() => {
// console.log(props.name)
props.deleteItemHandler(props.id)
}}
>
Delete
</button>
备注更新:
道具传递
App.jsx 至 UserIdentity.jsx
<UserIdentity
className="userId"
currentUser={username}
loginHandler={loginHandler}
logoutHandler={logoutHandler}
addListingHandler={addListingHandler}
//? for YourCard
itemsFromDB={itemsFromDB}
deleteItemHandler={deleteItemHandler}
/>
UserIdentity.jsx 到 YourCard.jsx
{yourItems.map((item) => {
return (
<YourCard
// className="YourCard"
name={item.name}
id={item.id}
key={item.id}
deleteItemHandler={props.deleteItemHandler}
/>
);
})}
我认为你没有正确处理道具
const App = () => {
const deleteItemHandler = async (id) => {
await deleteDoc(doc(db, "cities", id));
}
return (
<YourCard deleteItemHandler={deleteItemHandler} id={someId}}
)
child
export const YourCard = ({deleteItemHandler, id}) => {
return (
<button
className="btn btn-danger ms-2"
onClick={() => deleteItemHandler(id)}
>
Delete
</button>
)
终于发现问题出在addDoc()
,它添加了yc2
类型的新文档,而deleteDoc()
搜索了mc2
类型的文档。将添加方法更改为 setDoc()
修复它。
我是 React 和 Firebase 的新手,我遇到了一个问题,即没有调用删除文档函数并且没有发现任何错误。函数 deleteItemHandler( ) 执行 运行,但 deleteDoc( ) 不执行。我已经更改了规则并确保导入正确,但它仍然无法正常工作。
deleteItemHandler( ), App.jsx
//? Delete item function
const deleteItemHandler = async (id) => {
try {
await deleteDoc(doc(db, "items", id));
}
catch (error) {
console.log(error);
}
}
删除按钮,YourCard.jsx
<button
className="btn btn-danger ms-2"
onClick={() => {
// console.log(props.name)
props.deleteItemHandler(props.id)
}}
>
Delete
</button>
备注更新: 道具传递 App.jsx 至 UserIdentity.jsx
<UserIdentity
className="userId"
currentUser={username}
loginHandler={loginHandler}
logoutHandler={logoutHandler}
addListingHandler={addListingHandler}
//? for YourCard
itemsFromDB={itemsFromDB}
deleteItemHandler={deleteItemHandler}
/>
UserIdentity.jsx 到 YourCard.jsx
{yourItems.map((item) => {
return (
<YourCard
// className="YourCard"
name={item.name}
id={item.id}
key={item.id}
deleteItemHandler={props.deleteItemHandler}
/>
);
})}
我认为你没有正确处理道具
const App = () => {
const deleteItemHandler = async (id) => {
await deleteDoc(doc(db, "cities", id));
}
return (
<YourCard deleteItemHandler={deleteItemHandler} id={someId}}
)
child
export const YourCard = ({deleteItemHandler, id}) => {
return (
<button
className="btn btn-danger ms-2"
onClick={() => deleteItemHandler(id)}
>
Delete
</button>
)
终于发现问题出在addDoc()
,它添加了yc2
类型的新文档,而deleteDoc()
搜索了mc2
类型的文档。将添加方法更改为 setDoc()
修复它。