javascript - 如何在单击按钮时使用钩子和 Redux 触发 API 调用

Question

const onYesBtnClick = (event, id) => {

    dispatch(deleteMedicine, id);
    setConfirmModal(!setConfirmModal);
  };

然后我用 callEffect 尝试相同的代码

  const onYesBtnClick = useCallback(
    (event, id) => {

      dispatch(deleteMedicine, id);
      setConfirmModal(!setConfirmModal);
    },
    // eslint-disable-next-line
    []
  );

deleteMedicine 是执行 API 调用的函数。

   const medList = useSelector((state) => state.medicineReducer.MedicineList);

medList 保存来自 redux 的数据。我可以在 onesBtnClick 中直接访问 medList

两个代码都不起作用。这是使用 redux 和钩子单击按钮时 API 调用的正确方法吗

标签： javascriptreactjsreact-reduxreact-hooks

Answer 1

您需要通过调用函数而不是作为参数传递来调度函数

const onYesBtnClick = (event, id) => {
    console.log(medList); // directly access from closure here
    dispatch(deleteMedicine(id)); // call with id
    setConfirmModal(!setConfirmModal);
  };

或者使用 useCallback 你会这样写

const onYesBtnClick = useCallback(
    (event, id) => {
      console.log(medList);
      dispatch(deleteMedicine(id));
      setConfirmModal(prev => !prev); // using callback here is necessary
    },

    [medList] // add as a dependency here
  );