异步更新和删除Firestore数据和Firebase存储

如何解决异步更新和删除Firestore数据和Firebase存储

我有一个crud，用于存储包含数据的图像。它由name，type，qty，description和url组成。这里的URL是存储图像URL，该图像已在数据之前存储并生成了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(""));
    };

我现在不具备的功能是update和delete的url，我尝试遵循create方法的update方法，而url不变。下面是更新方法的代码：

const 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>
        </>
    );
};

这是列表项代码（在这里，<img src={item.url}>中使用了存储值url）：

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;

**注意：

• 我已经导入了React,{ useState,useEffect } from "react";和 为每个文件import firebase from "../firebase";
• 在代码中，我只是使用url字段来输入不太长的代码

解决方法

您可以使用Firestore的update() API

请从这里参考更多。

https://firebase.google.com/docs/firestore/manage-data/add-data#update-data

删除数据也记录如下。

https://firebase.google.com/docs/firestore/manage-data/delete-data