反应地图值复制firebase答案

【问题标题】：React map values duplicating firebase反应地图值复制firebase
【发布时间】：2022-06-23 10:43:28
【问题描述】：

我使用 firebase 作为我的数据库，添加到 firebase 的数据是正确的，但是实时数据上的映射值是重复的。[这里是映射数据][1] [1]：https://i.stack.imgur.com/MhKo5.png

您可以看到为什么重复的值，但我已经输入了不同的值，并且我还添加了一个功能来防止用户输入相同的值，如您在图像上看到的那样，有一条错误消息

这是我的代码

我用于实时获取数据的 useEffect 和 firebase 代码

useEffect(() => {
    const unsubscribe = onSnapshot(docCollection, (snapshot) => {
      const data = [];
      snapshot.docs.map((val) => {
        data.push({
          docID: val.id,  
          label: val.data().labelName,
          created_at: val.data().created_at,
        });
      });
      dispatch(setLabels(data));
    });
    return () => unsubscribe();
  }, []);

映射数据

{labels.map((val, i) => {
              return (
                <LabelComp
                  key={i}
                  setActiveText={setActiveText}
                  labelName={val.label}
                  docID={val.docID}
                />
              );
            })}

还有我的 redux 代码

export const label = createSlice({
  name: "label",
  initialState: {
    currentLabel: "",
    labels: [],
  },
  reducers: {
    setCurrentLabel: (state, action) => {
      state.currentLabel = action.payload;
    },
    setLabels: (state, action) => {
      state.labels = action.payload;
    },
  },
});

【问题讨论】：

标签： javascript reactjs firebase react-redux use-effect

【解决方案1】：

没关系，我找到了解决方案，我将映射值上的键替换为从 firebase 获取数据的文档 ID

【讨论】：