javascript - React (Javascript) - 回调重叠

Question

我已经实现了我的自定义钩子“useReducerWithCallback”

export default function useReducerWithCallback(
  reducer,
  initialState,
  initializer
) {
  const [state, dispatch] = useReducer(reducer, initialState, initializer);

  const callbackRef = useRef(undefined);

  const customDispatch = (action, callback) => {
    callbackRef.current = callback;
    console.log("Callback updated"); // <-------
    dispatch(action);
  };

  useEffect(() => {
    console.log("Executing callback"); // <--------
    callbackRef.current?.(state);
  }, [state]);

  return [state, customDispatch];
}

它基本上像典型的 useStateWithCallback 一样工作，但使用了 useReducer。

我在上下文提供程序中使用这个钩子，它在堆栈导航器内的屏幕中使用。

这个屏幕有一个我的数据库的监听器，当它被触发时，屏幕与我的上下文提供者减速器通信，传递一个自定义回调。

我遇到的问题是，当我在堆栈导航器中推送同一屏幕的另一个实例时，因为两个屏幕都侦听数据库的同一部分，它们同时与上下文提供程序通信，并且它们的回调重叠。

这是我的上下文提供者：

function contentsReducer(contents, action) {
   ...
}

export function ContentsProvider({ children }) {
  const [contents, dispatch] = useReducerWithCallback(
    contentsReducer,
    new Map([])
  );

  ...

  const addContents = (contents, callback = undefined) => {
     console.log("Adding contents"); <------
     dispatch(
       {
         type: "add-contents",
         contents,
       },
       callback
     );
   };

  ...

}

堆栈屏幕 1 和 2（最后推送的）是相同的。两者都使用其方法“addContents”与上下文提供程序通信，您在前面的代码中看到了该方法，但由于某种原因，回调是重叠的。

这是 useReducerWithCallback 的结果：

Adding contents
Callback updated
Adding contents
Callback updated
Executing callback
Executing callback

什么时候应该：

Adding contents
Callback updated
Executing callback
Adding contents
Callback updated
Executing callback

有任何想法吗？我认为这个问题是因为化简器集中在一个独特的点，即上下文提供者，但我不知道如何解决这个问题。

谢谢你。

标签： javascriptreactjsreact-nativereact-hooks