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

问题描述

我正在使用 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),[reservations]);

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

感谢您的帮助。

解决方法

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

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
      ),[])