在导航之间切换时将项目读取到列表中（firebase）

Question

我尝试渲染我的 firestore 数据库中的项目。它在第一次渲染时正确显示，但当我在 tabs/navigations 之间切换时，它会再次将数据读取到列表中。如果我继续在选项卡之间切换，它会添加越来越多。

当我使用本地状态时没有问题，但问题是当我使用分派显示项目时它会将更多项目读取到列表中（不是 firestore 数据库）。

useEffect(
    () =>
      onSnapshot(collection(db, "users"), (snapshot) => {
        console.log(
          "snapshot",
          snapshot.docs.map((doc) => doc.data())
        );

        const firebaseData = snapshot.docs.map((doc) => doc.data());

        dispatch(addItem(firebaseData));
        setLocalState(firebaseData);
      }),
    []
  );

itemsSlice.js

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  items: [],
};

const itemsSlice = createSlice({
  name: "addItems",
  initialState,
  reducers: {
    addItem: (state, action) => {
      state.items.push(...action.payload);
    },
    emptyItems: (state) => {
      state.items = [];
    },
  },
});

export const { addItem, emptyItems } = itemsSlice.actions;
export default itemsSlice.reducer;

这是问题的 gif： https://gyazo.com/bf033f2362d9d38e9eb315845971e224

Answer 1

因为我不明白你是如何在选项卡之间切换的，所以我不能告诉你为什么组件似乎在重新呈现。 useEffect 钩子负责像 componentDidMount 和 componentDidUpdate 方法一样工作。并且全局 redux 状态不会在每次渲染后自行重置（这就是它如此出色的原因）。这不是组件状态的情况，每次从 dom 中删除和添加组件时，组件状态都会重置。这解释了为什么当您使用本地状态时，问题就消失了。这不是固定的，而是因为每次删除和添加组件时都会重置状态（这似乎是这里发生的事情）。由于我们没有完整的详细信息，因此应该快速解决这个问题

state.items.push(...action.payload);

有了这个

state.items = [...action.payload];

这会将新值设置为 state.items 而不是推送到它。

在导航之间切换时将项目读取到列表中（firebase）

readding items to the list while switching between navigations(firebase)

firebase

reactjs

react-redux

google-cloud-firestore

redux-toolkit