导出const函数中无法使用useSelector和useDispatch

Question

我无法在导出 const 函数中使用

useSelector

和

useDispatch

。

export const StartTelecalling = (piopiy, userId, password) => {
  const { modal, isTestCall, isOnline } = useSelector((state) => state.calls);
  const dispatch = useDispatch();
  
  piopiy.login(userId, password, "sbcind.telecmi.com");
  console.log("login Initiated..............");
  piopiy.on("login", (object) => {
    console.log(object);
    // if (object.code === 200) {
    console.log("login successfully......");
    //   dispatch(setIsOnline(true));

    // }
  });
}

在上面的代码中，我在

useSelector

和

useDispatch

处收到无效的钩子调用，并且我有多个像这样的导出，我无法声明为默认导出。

Answer 1

您不能根据 React 文档在嵌套函数、循环、条件或常规 JS 函数内调用钩子。此外，React Hooks 只能在顶层调用。显然，您正在常规 JS 函数内调用钩子。在函数式 React 组件中调用这些钩子可能会解决问题。

Answer 2

确保您在 React 组件或自定义钩子中使用

useSelector and useDispatch

钩子。该错误可能是由于使用了 React 组件或自定义钩子之外的钩子造成的。

Answer 3

无论是否默认导出，你都违反了Hooks规则：

仅调用顶层的钩子

不要在循环、条件或嵌套函数内调用 Hooks。相反，始终在 React 函数的顶层使用 Hooks， 在任何提前返回之前。通过遵循此规则，您可以确保 每次组件渲染时都会以相同的顺序调用钩子。 这就是 React 能够正确保存 Hooks 状态的原因 在多个

useState

和

useEffect

调用之间。

仅从 React 函数调用 Hooks

不要从常规 JavaScript 函数中调用 Hook。 相反，您可以：

• ✅ 从 React 函数组件调用 Hooks。
• ✅ 从自定义 Hooks 调用 Hooks

StartTelecalling

既不是 React 组件，也不是自定义 React hook。

您可以将

StartTelecalling

转换为自定义 React hook，基本上只需将其重命名为使用

"use-"

钩子前缀命名约定，以便它可以调用其他 React hook：

export const useStartTeleCalling = (piopiy, userId, password) => {
  const { modal, isTestCall, isOnline } = useSelector((state) => state.calls);
  const dispatch = useDispatch();
  
  return () => 
    piopiy.login(userId, password, "sbcind.telecmi.com");
    console.log("login Initiated..............");
    piopiy.on("login", (object) => {
      console.log(object);
      // if (object.code === 200) {
      console.log("login successfully......");
      //   dispatch(setIsOnline(true));

       // }
    });
  };
}

const startTeleCalling = useStartTeleCalling(piopiy, userId, password);

...

startTeleCalling();

或者重构函数以将选定状态和

dispatch

函数作为参数传入。

export const startTeleCalling = ({
  piopiy,
  userId,
  password,
  modal,
  isTestCall,
  isOnline,
  dispatch
}) => {
  piopiy.login(userId, password, "sbcind.telecmi.com");
  console.log("login Initiated..............");
  piopiy.on("login", (object) => {
    console.log(object);
    // if (object.code === 200) {
    console.log("login successfully......");
    //   dispatch(setIsOnline(true));

     // }
  });
}

const { modal, isTestCall, isOnline } = useSelector((state) => state.calls);
const dispatch = useDispatch();

...

startTeleCalling({
  piopiy,
  userId,
  password,
  modal,      // <-- pass selected state
  isTestCall, // <-- pass selected state
  isOnline,   // <-- pass selected state
  dispatch    // <-- pass dispatch
});