Question

我有一个React组件，该组件试图获取一些数据，并在成功检索数据后调用onSuccess(result)回调。

我需要将数据保存到redux。我创建了使用useDispatch的自定义挂钩，并且我正在尝试执行以下操作：

<MyComponent onSuccess = {res => myCustomHook(res)} />

但出现错误，因为无法在回调内部调用挂钩。

我知道挂钩只能在功能组件的顶层调用。.那么我如何才能实现所需的呢？

自定义挂钩：

    export function useSaveData(type, response)
  {
    if(!type|| !response)
    {
      throw new Error("got wrong parameters for useSaveData");
    }
    let obj= {
      myData1: response.data1,
      myData2: response.data2
    };
    sessionStorage.setItem(type, JSON.stringify(obj));
    const dispatch = useDispatch();
    dispatch(actionCreator.addAction(type, obj));
  }

Answer 1

您的自定义钩子应返回一个可以作为回调传递的函数。

useMyCustomHook = () => {
  // your hook
  const onSuccess = () => {
    // save data here
  }
  return { onSuccess };
}

在您的组件中。

function MyComponent(props) {
   const { onSuccess } = useMyCustomHook();
   // your component code, you have onSuccess which can be bind with button or form as per your requirement.
}

看到自定义钩子后进行编辑。

您无需在此处创建自定义钩子。您只需将调度传递到回调中即可。

const dispatch = useDispatch()
<MyComponent onSuccess={res => onSuccess(res, dispatch)} />

创建onSucces函数。

export function onSuccess(type, response, dispatch)
  {
    if(!type|| !response)
    {
      throw new Error("got wrong parameters for useSaveData");
    }
    let obj= {
      myData1: response.data1,
      myData2: response.data2
    };
    sessionStorage.setItem(type, JSON.stringify(obj));
    dispatch(actionCreator.addAction(type, obj));
  }

Answer 2

父组件可以按以下方式将调度程序传递给useSaveData。

    export const useSaveData = (dispatch) => (type, response) =>
  {
    if(!type|| !response)
    {
      throw new Error("got wrong parameters for useSaveData");
    }
    let obj= {
      myData1: response.data1,
      myData2: response.data2
    };
    sessionStorage.setItem(type, JSON.stringify(obj));
    dispatch(actionCreator.addAction(type, obj));
  }

父组件变成;

function ParentComponent() {
    const dispatch = useDispatch();
    const myCustomHook = useSaveData(dispatch);
    return <MyComponent onSuccess = {res => myCustomHook(ACTION_TYPE, res)} />
}

Answer 3

useDispatch是一个React Redux钩子，不能在功能组件主体之外的任何地方直接使用。即使从功能组件的主体中调用它，您也不能直接在另一个普通javascript函数中使用它。因此，要在其他地方使用useDispatch钩子，可以在useDispatch钩子中声明一个const。请注意，这只能在函数组件内部进行，如下所示：

export default function MyComponent {

    const dispatch = useDispatch()
......
}

现在，此const派发可以传递到其他任何地方，包括回叫。在回叫中，您可以访问传递的dispatch参数并在其上调用redux API，如下所示：

export function useSaveData(type, response, dispatch)
  {
    if(!type|| !response)
    {
      throw new Error("got wrong parameters for useSaveData");
    }
    let obj= {
      myData1: response.data1,
      myData2: response.data2
    };
    sessionStorage.setItem(type, JSON.stringify(obj));
    dispatch(actionCreator.addAction(type, obj));
  }

如何在回调中调用useDispatch

3 个答案: