在删除后执行GET时，Firebase返回空引用 [英] Firebase returning null references when GET after DELETE
问题描述
我正在运行带有Firebase背面的react应用.我有一个端点"/items".
Im running a react app with Firebase in the back. I have an endpoint "/items".
当我通过Axios调用DELETE请求时，数据库反映了正确的数据.但是，在DELETE请求之后，当我调用GET请求以检索更新的项目"时，我得到了已删除项目所在的空引用，从而导致了空引用错误.
When I invoke a DELETE request through Axios, the database reflects the correct data. However, after the DELETE request when I invoke a GET request to retrieve updated "items" I get a null reference where the deleted item was, leading to a null reference error.
EXAMPLE
-Original [item1, item2, item3]
*Delete item2
-Get
- [item1, null, item3]
但是在Firebase上它可以正确反映..
However on Firebase it is reflected correctly..
class VendingMachine extends Component {
state = {
balance: "",
items: [],
}
getItems = () => {
axios.get('items.json')
.then(response => {
if (response.data) {
this.setState({ items: Object.values(response.data) });
}
})
}
deleteItemHandler = (id) => {
axios.delete('/items/' + id + '.json')
.then((response) => {
this.getItems();
});
}
放置请求在另一个组件中.
Put Request is in another component..
class NewItem extends Component {
errorElement = React.createRef();
state = {
newItem: {
name: "",
position: null,
price: "",
image: ""
},
showError: false
};
addItemHandler = () => {
if (this.props.items.length === 9) {
this.setState({ showError: true });
return;
}
const newItem = {
id: this.props.items.length,
name: this.state.newItem.name,
price: this.state.newItem.price,
image: this.state.newItem.image,
position: this.props.items.length
}
console.log(newItem);
axios.put('/items/' + newItem.id + '.json', newItem)
.then(response => {
this.props.updateItems()
})
.catch(error => console.log(error));
}
推荐答案
将数组存储在Firebase中时，这是预期的行为.
This is the expected behavior when you store arrays in Firebase.
存储时:
["item1", "item2", "item3"]
Firebase数据库服务器实际上将其存储为:
The Firebase Database server actually stores it as:
{
"0": "item1",
"1": "item2",
"2": "item3"
}
然后意味着当您删除 item2 时，您最终得到:
And then means that when you delete item2, you end up with:
{
"0": "item1",
null,
"2": "item3"
}
然后将哪个Firebase客户端转换回:
Which the Firebase client then translates back to:
["item1", null, "item3"]
您有两个选择:
- 始终更新整个阵列
- 使用集合而不是数组
始终更新整个阵列
如果要继续将项目存储为数组，则必须在删除项目之后为所有项目重新编号索引.因此，这意味着对阵列的任何更新，都意味着您需要读写整个阵列.
Always update the entire array
If you want to keep storing the items as an array, you will have to renumber the index for all items after the ones you remove. So that means that any update to an array, means you need to read-and-then-write the entire array.
但是您实际上可能没有存储数组.许多开发人员使用数组来存储类似集合的数据结构，即唯一项的无序集合.例如: ["item3"，"item2"，"item1"] 在 ["item1"，"item2"，"item3"] 上是否具有相同的含义?在您的应用中， ["item1"，"item1"，"item2"，"item3"] 实际上是非法的吗?如果是这样，那么您正在查看类似集合的数据结构，该结构在Firebase中可以更好地映射到:
But you may not actually be storing an array. Many developers use arrays to store set-like data structures, i.e. unordered collections of unique items. For example: does ["item3", "item2", "item1"] have the same meaning at ["item1", "item2", "item3"]? And is ["item1", "item1", "item2", "item3"] actually illegal in your app? If so, you're looking at a set-like data structure, which in Firebase is better mapped to:
{
"item1": true,
"item2": true,
"item3": true
}
true 值是没有意义的，仅是需要的，因为Firebase不会存储没有值的密钥.但是除此之外，这是存储类似集合的集合的最佳结构.而且，如果您从其中删除 item2 ，Firebase只会返回没有该键的对象:
The true value is meaningless and only needed because Firebase won't store a key without a value. But aside from that, this is the best structure to store such a set-like collection. And if you remove item2 from this, Firebase will simply return the object without that key:
{
"item1": true,
"item2": true,
"item3": true
}
有关此的更多信息，请参见:
For more on this, also see:
这篇关于在删除后执行GET时，Firebase返回空引用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
