当更改来自另一个组件时，如何让 useEffect 仅更新更改

Question

我正在使用 zustand 进行状态管理，并且在检索一次数据后，当组件状态发生变化时，我试图只实时更新组件而不刷新页面。

这是我的商店

export const useStore = create((set) => ({
  reservations: [],
  getReservations: async () => {
    const response = await axios.get(baseUrl);
    set({ reservations: response.data });
  },
  setRev: (reservations) => {
    set((state) => ({
      ...state,
      reservations,
    }));
  },
  addReservation: (reservation) => {
    set((state) => ({ reservations: [...state.reservations, reservation] }));
  },
  removeReservation: (id) => {
    set((state) => ({
      reservations: state.reservations.filter(
        (reservation) => id !== reservation._id
      ),
    }));
  },
}));

我已经尝试使用 useEffect 挂钩来检索数据，如下面的代码所示，我有另一个组件调用 addReservation 函数。下面的代码会导致无限调用useEffect，而不是仅在const reservations发生更改时才更新，当另一个组件调用addReservation函数时。

const getAllReservation = useStore((state) => state.getReservations);
  const reservations = useStore((state) => state.reservations);
  const reservationsRef = useRef(useStore.getState().reservations);

  useEffect(() => {
    getAllReservation()
    useStore.subscribe(
      (reservations) => (reservationsRef.current = reservations),
      (state) => state.reservations
    );
  }, [reservations]);

我曾尝试拆分 useEffects，但需要再次刷新页面以显示更新的数据。 （想要的结果是没有刷新）

  useEffect(() => {
    getAllReservation()
  }, [])
  useEffect(() => {
    useStore.subscribe(
      (reservations) => (reservationsRef.current = reservations),
      (state) => state.reservations
    );
  }, [reservations]);

我尝试将 [] 作为依赖数组作为 useEffect 挂钩中的第二个参数，但效果不佳。

感谢您的帮助。

Answer 1

React 无法检测到 Ref 内部的变化。所以需要将更新的预订作为道具传递或保存在本地状态。

Zustand docs

订阅功能允许组件绑定到状态部分 不强制重新渲染更改。最好将它与 useEffect 结合使用 卸载时自动取消订阅。这可以使一个激烈的 当您被允许直接改变视图时的性能影响。

  const useStore = create(set => ({ scratches: 0, ... }))
    function Component() {
      // Fetch initial state
      const scratchRef = useRef(useStore.getState().scratches)
      // Connect to the store on mount, disconnect on unmount, catch state-changes in a reference
      useEffect(() => useStore.subscribe(
        scratches => (scratchRef.current = scratches),
        state => state.scratches
      ), [])