javascript - 在 useImperativeHandle 内部调用的调度不调用操作

Question

我有一个带有保存按钮的组件

<Button onClick={() => requestSaveAsync()}>Save</Button>

我还需要能够从应用程序的顶层调用 requestSaveAsync，因此我在名为 useEditRow 的自定义钩子(Hook)中添加了一个 useImperativeHandle 钩子(Hook)

interface Props {
    ref: MutableRefObject<{
        addItem: () => void
    }>
}

const useEditRow = (props: Props) => {
    useImperativeHandle(props.ref, () => ({
        addItem: () => requestSaveAsync()
    })
}

useEditRow 钩子(Hook)位于 OrderItemTable 组件内

const OrderItemTable = forwardRef(function OrderItemTable(props: Props, ref: MutableRefObject<any>) {
    const editRow = useEditRow({
        ref: ref
    })
})

requestSaveAsync 方法使用来自 react-query 的 useMutation

useMutation(mutateFn, {
  onSuccess: () => dispatch({type: 'clear', name: 'row'})
})

清除行将状态设置为初始状态。如果通过单击按钮调用 requestSaveAsync，则会清除该行。如果我通过父组件调用它，则调用 onSuccess 函数，但调度不执行任何操作。如果我在调度函数上放置一个断点，我会看到下面的代码即将从 react_devtools_backend.js 调用

  useReducer: function (a, b, e) {
    a = F();
    b = null !== a ? a.memoizedState : void 0 !== e ? e(b) : b;
    z.push({
      primitive: "Reducer",
      stackError: Error(),
      value: b
    });

    // devtools show the empty function on this line will be executed next
    return [b, function () {}];
  },

起初我认为可能 useImperativeHandle 使用的是陈旧状态，所以我尝试返回 {...initialState} 而不是 initialState。这似乎没有帮助。我尝试添加 react-hooks/exhaustive-dep 建议的依赖项数组。那没有帮助。有谁知道为什么当从 useImperativeHandle 调用 dispatch 时，状态不会更新？
这是一个 codesandbox有一些基本的想法，显示在 abo 上。

Answer 1

您的 useImperativeHandle钩子(Hook)似乎没有使用 转发 react 引用。换句话说，React 引用 不是 子组件可以访问的常规 React Prop 。
您应该使用 React.forwardRef将任何传递的引用正确转发到函数组件。
React.forwardRef
Forwarding Refs
您没有包含您的功能组件，但如果您按照提供的链接中的示例进行操作，则很容易弄清楚。
例子:

const MyComponentWithSaveButton = (props, ref) => {
  useImperativeHandle(ref, () => ({
    addItem: requestSaveAsync,
  }));

  const requestSaveAsync = () => { .... };

  ...
};

export default React.forwardRef(MyComponentWithSaveButton);

注意这里的函数组件签名不接受两个参数， props对象和 React ref正在转发，并且 useImperativeHandle钩子(Hook)引用了转发的 ref .