Reactjs 使用 React、Redux 和 Firebase 的无限循环

我在Firebase中有一个配置文件文档集合，我想在配置文件页面中呈现它们，但是，在我更新了用户配置文件状态并使用useDispatch将状态存储在切片中之后，在呈现配置文件页面时，我得到了一个无限循环.

我已经try 将Dispatch()放入useEffect中，而不是放在useEffect和querySnapshotpromise 中，但无论我把它放在哪里，都会得到无限循环.

我们非常感谢您的反馈，谢谢.

\\ profiles.js

export const Profiles = () => {
  const [userProfiles, setUserProfiles] = useState([]);
  const dispatch = useDispatch();

  const navigate = useNavigate();
  const user = useSelector(selectUser);

  db.collection("customers")
    .doc(user.info.uid)
    .collection("profiles")
    .get()
    .then((querySnapshot) => {
      const documents = querySnapshot.docs.map((doc) => doc.data());
      setUserProfiles(documents);
    });

  useEffect(() => {
    dispatch(profiles(userProfiles));
  }, []);

  console.log({ userProfiles });

  return (
    <div className="profile_container">
      <h1 className="profile_title">Who's Watching?</h1>
      <div className="profile_row">
        {userProfiles.map((profile) => {
          return (
            <div className="profile_individualProfile">
              <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>
  );
};

\\ 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, action) => {
      state.user.profiles.push(action.payload);
      },
  },
});