使用 React 和 Axios 更新 Firebase 中的数据

Posted 2023-02-22

【中文标题】使用 React 和 Axios 更新 Firebase 中的数据

【英文标题】：Updating Data in Firebase using React and Axios

【发布时间】：2019-06-01 09:34:03

【问题描述】：

我正在尝试更新 firebase 数据库中的一些数据。但是我无法让 updateAPI 函数正常工作。我相信是和axios.put有关，url可能没有正确遍历数据？

我尝试更改网址，但最终出现 OPTIONS 和 CORS 错误，这意味着网址不正确。

        // API Function calls
        async getAPI()
                const response = await axios.get('https://fir-test-euifhefibewif.firebaseio.com/todos.json')
                console.log(response)
                console.log(response.data)
            
            async postAPI()
                const response = await axios.post('https://fir-test-euifhefibewif.firebaseio.com/todos.json', name: notesAll)
                console.log(response)
                console.log(response.data)
            
            async deleteAPI()
                const response = await axios.delete('https://fir-test-euifhefibewif.firebaseio.com/todos.json')
                console.log(response)
                console.log(response.data)
            
            async updateAPI()
                const response = await axios.put('https://fir-test-euifhefibewif.firebaseio.com/todos/-LVYEw6KTltVoEkPeuxY/name/0', note)
                console.log(response)
                console.log(response.data)
            

        // Notes notesAll
        const notesAll = [
        
                "name": "user1",
                "race": "human"
            ,
            
                "name": "user2",
                "race": "human"
            ,
            
                "name": "user3",
                "race": "human"
            ,
            
                "name": "user4",
                "race": "human"
            ,
            
                "name": "user5",
                "race": "human"
            
        ]

        // Test data
            const note = [
            
                name: 'Test',
                race: 'Test'
            
        ]

        // Firebase database example
        
        "todos": 
            "-LVYIfktKR6fa6ish1aw": 
            "name": [
                
                "name": "user1",
                "race": "human"
                ,
                
                "name": "user2",
                "race": "human"
                ,
                
                "name": "user3",
                "race": "human"
                ,
                
                "name": "user4",
                "race": "human"
                ,
                
                "name": "user5",
                "race": "human"
                
            ]
            
        
        

所有代码需要做的就是更新对象数组中的一些数据。

【问题讨论】：

你遇到了什么错误？

@Colin OPTIONS 405（不允许的方法）从源 'localhost:3000' 访问 XMLHttpRequest 在 'fir-test-euifhefibewif.firebaseio.com/todos/name/0/name' 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：它没有 HTTP ok 状态。未捕获（承诺）错误：XMLHttpRequest.handleError 处的 createError (createError.js:17) 处的网络错误

【参考方案1】：

试试：

    async updateAPI()
        const response = await axios.put('https://fir-test-euifhefibewif.firebaseio.com/todos/-LVYEw6KTltVoEkPeuxY/name/0', note)
        console.log(response)
        console.log(response.data)
    

    // Test data
    const note = 
        name: 'Test',
        race: 'Test'
    

要使用 REST 写入 Firebase 数据库，URL 必须以 .json 结尾。所以：

url = yourUrl + ".json";

在此处查找更多信息：https://firebase.google.com/docs/database/rest/save-data

【讨论】：

谢谢，我试了代码，还是不行。