Question

我正在运行带有Firebase背面的react应用。我有一个端点“ / items”。

当我通过Axios调用DELETE请求时，数据库反映了正确的数据。但是，在DELETE请求之后，当我调用GET请求以检索更新的“项目”时，我得到了已删除项目所在的空引用，从而导致了空引用错误。

EXAMPLE
-Original [item1, item2, item3]
*Delete item2

-Get
   - [item1, null, item3]

但是在Firebase上它可以正确反映。.

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();
        });

}

放置请求在另一个组件中。

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

Answer 1

这是在Firebase中存储阵列时的预期行为。

存储时：

["item1", "item2", "item3"]

Firebase数据库服务器实际上将其存储为：

{
  "0": "item1",
  "1": "item2",
  "2": "item3"
}

然后意味着当您删除item2时，您最终得到：

{
  "0": "item1",
  null,
  "2": "item3"
}

然后将哪个Firebase客户端转换回：

["item1", null, "item3"]

您有两个选择：

始终更新整个阵列
使用集合而不是数组

始终更新整个阵列

如果要继续将项目存储为数组，则必须在删除项目之后为所有项目重新编号索引。因此，这意味着对阵列进行任何更新，都意味着您需要先读取然后再写入整个阵列。

使用集合而不是数组

但是您实际上可能没有存储数组。许多开发人员使用数组来存储类似集合的数据结构，即唯一项的无序集合。例如：["item3", "item2", "item1"]与["item1", "item2", "item3"]的含义相同吗？ ["item1", "item1", "item2", "item3"]在您的应用中实际上是非法的吗？如果是这样，那么您正在查看类似集合的数据结构，该结构在Firebase中可以更好地映射到：

{
  "item1": true,
  "item2": true,
  "item3": true
}

true的值是没有意义的，仅是需要的，因为Firebase不会存储没有值的密钥。但除此之外，这是存储此类类似集合的最佳结构。而且，如果您从中删除item2，Firebase只会返回没有该键的对象：

{
  "item1": true,
  "item2": true,
  "item3": true
}

有关此的更多信息，请参见：

在删除后进行获取时，Firebase返回空引用

1 个答案:

始终更新整个阵列

使用集合而不是数组