使用React、Redux和Firebase渲染页面时出现无限循环问题求助

问题根源 #

1. 组件顶层的Firebase请求：直接在组件函数体内调用db.collection(...).get()，会导致每次组件渲染时都执行一次请求，请求完成后调用setUserProfiles触发组件重新渲染，进而再次执行请求，形成无限循环。
2. Redux Reducer的错误更新逻辑：profiles reducer使用push(action.payload)，而action.payload是整个用户资料数组，这会导致state.user.profiles变成嵌套数组（比如[[profile1, profile2], [profile1, profile2]]），且每次dispatch都会追加新数组，触发Redux状态更新，引发组件重新渲染。
3. 不必要的本地状态冗余：同时维护组件本地的userProfiles状态和Redux中的user.profiles状态，增加了状态同步复杂度，也可能间接导致循环。

修复步骤 #

1. 将Firebase请求移至useEffect中

把数据请求逻辑放到useEffect里，仅当用户UID变化时才执行请求，避免重复触发：

// profiles.js
export const Profiles = () => {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const user = useSelector(selectUser);
  // 直接从Redux获取profiles，移除本地状态冗余
  const profiles = useSelector(state => state.user.profiles);

  useEffect(() => {
    // 确保用户UID存在再发起请求
    if (!user.info?.uid) return;

    db.collection("customers")
      .doc(user.info.uid)
      .collection("profiles")
      .get()
      .then((querySnapshot) => {
        const documents = querySnapshot.docs.map((doc) => doc.data());
        // 直接dispatch到Redux，无需本地状态中转
        dispatch(setProfiles(documents));
      });
  }, [user.info?.uid, dispatch]); // 依赖UID和dispatch，控制执行时机

  return (
    <div className="profile_container">
      <h1 className="profile_title">Who's Watching?</h1>
      <div className="profile_row">
        {profiles.map((profile, index) => {
          return (
            <div key={index} className="profile_individualProfile"> {/* 增加key避免React警告 */}
              <img
                src="https://occ-0-300-1167.1.nflxso.net/dnm/api/v6/K6hjPJd6cR6FpVELC5Pd6ovHRSk/AAAABY5cwIbM7shRfcXmfQg98cqMqiZZ8sReZnj4y_keCAHeXmG_SoqLD8SXYistPtesdqIjcsGE-tHO8RR92n7NyxZpqcFS80YfbRFz.png?r=229"
                alt="profile"
              />
              <p>{profile.name}</p>
            </div>
          );
        })}
        <div
          onClick={() => navigate("/add-profile")}
          className="profile_addProfile_container"
        >
          <img
            src="https://img.icons8.com/ios-glyphs/30/FFFFFF/plus--v1.png"
            alt="add profile"
          />
          <h2>Add Profile</h2>
        </div>
      </div>
    </div>
  );
};

2. 修正Redux Reducer的更新逻辑

将push改为直接替换数组，确保每次更新都是完整的用户资料列表：

// userSlice.js
export const userSlice = createSlice({
  name: "user",
  initialState: {
    user: {
      info: null,
      profiles: [],
    },
  },
  reducers: {
    login: (state, action) => {
      state.user.info = action.payload;
    },
    logout: (state) => {
      state.user.info = null;
      // 登出时清空profiles
      state.user.profiles = [];
    },
    setProfiles: (state, action) => {
      // 直接替换数组，而非追加
      state.user.profiles = action.payload;
    },
  },
});

// 导出修改后的action creator
export const { login, logout, setProfiles } = userSlice.actions;

额外优化建议 #

• 添加加载状态：在请求过程中显示加载动画，提升用户体验。
• 处理错误情况：给Firebase请求添加catch块，捕获并处理请求失败的情况。
• 使用Firebase实时监听：如果需要实时同步资料变化，可以用onSnapshot替代get()，资料更新时组件会自动刷新：

  useEffect(() => {
    if (!user.info?.uid) return;
  
    const unsubscribe = db.collection("customers")
      .doc(user.info.uid)
      .collection("profiles")
      .onSnapshot((querySnapshot) => {
        const documents = querySnapshot.docs.map((doc) => doc.data());
        dispatch(setProfiles(documents));
      }, (error) => {
        console.error("监听资料失败:", error);
      });
  
    // 组件卸载时取消监听
    return () => unsubscribe();
  }, [user.info?.uid, dispatch]);
  

内容的提问来源于stack exchange，提问作者Kirsty Richmond