在react js中的export const函数中无法使用useSelector和useDispatch

Question

在react js中的export 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

你违反了Hooks规则

仅调用顶层的钩子

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

useState

和

useEffect

调用之间。

您可以将

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
});