Javascript 异步更新和删除firestore数据和firebase存储
我有一个Javascript 异步更新和删除firestore数据和firebase存储,javascript,reactjs,firebase,next.js,Javascript,Reactjs,Firebase,Next.js,我有一个crud用于存储图像中包含的数据。它包括名称，类型，数量，说明，以及url。这里的Url用于存储图像Url，即图像在数据之前已存储并生成Url 以下是创建方法的代码： //useState() hook captures the value from the input value const [url, setUrl] = useState("") const fileButton = (e) => { // get the
crud名称类型数量说明url//useState() hook captures the value from the input value
const [url, setUrl] = useState("")
const fileButton = (e) => {
// get the file
var file = e.target.files[0];
const storageRef = firebase.storage().ref('images/' + file.name).put(file);
// Listen for state changes, errors, and completion of the upload.
storageRef.on(firebase.storage.TaskEvent.STATE_CHANGED, // or 'state_changed'
function (snapshot) {
// Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
console.log('Upload is ' + progress + '% done');
switch (snapshot.state) {
case firebase.storage.TaskState.PAUSED: // or 'paused'
console.log('Upload is paused');
break;
case firebase.storage.TaskState.RUNNING: // or 'running'
console.log('Upload is running');
break;
}
}, function (error) {
// A full list of error codes is available at
// https://firebase.google.com/docs/storage/web/handle-errors
switch (error.code) {
case 'storage/unauthorized':
// User doesn't have permission to access the object
break;
case 'storage/canceled':
// User canceled the upload
break;
case 'storage/unknown':
// Unknown error occurred, inspect error.serverResponse
break;
}
}, function () {
// Upload completed successfully, now we can get the download URL
storageRef.snapshot.ref.getDownloadURL().then(function (downloadURL) {
console.log('File available at', downloadURL);
setUrl(downloadURL)
})
})
}
/* The onSubmit function we takes the 'e'
or event and submits it to Firebase
*/
const onSubmit = e => {
/*
preventDefault is important because it
prevents the whole page from reloading
*/
e.preventDefault();
firebase.firestore().collection("items").add({url})
//then will reset the form to nothing
.then(() => setUrl(""));
};
updatedeleteconst UpdateItem = ({ setEditing, currentItem, updateItem }) => {
/*
Sets the state of the item to the current item
*/
const [item, setItem] = useState(currentItem);
useEffect(() => {
setItem(currentItem);
setUrl("")
console.log("useEffect passes the currentItem: ", currentItem);
}, [currentItem]);
const onSubmit = e => {
e.preventDefault();
console.log("onSubmit passes the id and items", item);
updateItem({ currentItem }, item);
};
const onChange = e => {
const { name, value } = e.target;
setItem({ ...item, [name]: value })
};
return (
<>
<h2>Update Item</h2>
<div className="file-div">
<font>Upload your image</font>
<label className="file-label">
<input type="file" onChange={fileButton} />
<span>+</span>
</label>
</div>
<form onSubmit={onSubmit}>
<label htmlFor="Update Item">Update Item:</label>
<input
value={item.url}
name="url"
onChange={onchange}
type="text"
hidden={true}
/>
<button>Update</button>
<button onClick={() => setEditing(false)}>Cancel</button>
</form>
</>
);
};
const UpdateItem=（{setEditing，currentItem，UpdateItem}）=>{
/*
将项的状态设置为当前项
*/
const[item，setItem]=useState（currentItem）；
useffect（（）=>{
设置项（当前项）；
setUrl（“”）
log（“useEffect传递currentItem:”，currentItem）；
}，[currentItem]）；
const onSubmit=e=>{
e、 预防默认值（）；
log（“onSubmit传递id和items”，item）；
updateItem（{currentItem}，item）；
};
const onChange=e=>{
常量{name，value}=e.target；
setItem（{…项，[名称]：值}）
};
返回(
更新项目
上传你的图片
+
更新项目：
更新
setEditing（false）}>取消
);
};
const useItems=（）=>{
//useState（）钩子，将初始状态设置为空数组
const[items，setItems]=useState（[]）；
useffect（（）=>{
const unsubscribe=firebase
.firestore（）//访问firestore
.collection（“items”）//访问“items”集合
.onSnapshot（快照=>{
//您可以使用onSnapshot（）方法“侦听”文档。
const listItems=snapshot.docs.map（doc=>({
//将每个文档映射到快照中
id:doc.id、//id和推送到items数组中的数据
…doc.data（）//排列运算符将数据合并到id。
}));
setItems（listItems）；//items等于listItems
});
return（）=>unsubscribe（）；
}, []);
退货项目；
};
const deleteItem=id=>{
火基
.firestore（）
.收款（“项目”）
.doc（id）
.delete（）；
};
常量项列表=（{editItem}）=>{
const listItem=useItems（）；
返回(
形象
{listItem.map（项=>(
编辑项目（项目）}>编辑
deleteItem（item.id）}>Delete
))}
);
};
导出默认项目列表；
- 我已经从“React”导入了
React，{useState，useffect}&从“./firebase”导入firebase - 在代码中，我只是使用
字段来表示不太长的代码url
update（）update（）在堆栈溢出时，所有相关代码必须包含在问题本身中。不要链接到外部资源，因为这些资源可能会过时，使这个问题在将来对其他人毫无用处。这难道不会使开发人员更容易不编写两次代码吗？毕竟，我插入的链接已经生成了代码，只需编辑问题，将相关代码复制并粘贴到问题中即可。这是一项网站政策：“确保重现问题所需的所有信息都包含在问题本身中”。阅读：谢谢，我已经更新了我的codesOn堆栈溢出，所有相关代码必须包含在问题本身中。不要链接到外部资源，因为这些资源可能会过时，使这个问题在将来对其他人毫无用处。这难道不会使开发人员更容易不编写两次代码吗？毕竟，我插入的链接已经生成了代码，只需编辑问题，将相关代码复制并粘贴到问题中即可。这是一项网站政策：“确保重现问题所需的所有信息都包含在问题本身中”。阅读：谢谢，我已经更新了我的代码
const useItems = () => {
//useState() hook, sets initial state to an empty array
const [items, setItems] = useState([]);
useEffect(() => {
const unsubscribe = firebase
.firestore() //access firestore
.collection("items") //access "items" collection
.onSnapshot(snapshot => {
//You can "listen" to a document with the onSnapshot() method.
const listItems = snapshot.docs.map(doc => ({
//map each document into snapshot
id: doc.id, //id and data pushed into items array
...doc.data() //spread operator merges data to id.
}));
setItems(listItems); //items is equal to listItems
});
return () => unsubscribe();
}, []);
return items;
};
const deleteItem = id => {
firebase
.firestore()
.collection("items")
.doc(id)
.delete();
};
const ItemList = ({ editItem }) => {
const listItem = useItems();
return (
<table className="tg">
<tbody>
<tr>
<td className="tg-a02x">Image</td>
<td className="tg-6hdc"></td>
</tr>
</tbody>
{listItem.map(item => (
<tbody key={item.id}>
<tr>
<td className="tg-a02x">
<img width="50" height="50" src={item.url} />
</td>
<td className="tg-6hdc">
<button onClick={() => editItem(item)}>Edit</button>
<button onClick={() => deleteItem(item.id)}>Delete</button>
</td>
</tr>
</tbody>
))}
</table>
);
};
export default ItemList;