为什么我得到错误无效钩子调用时，我在一个函数内调用它

Question

我有一个在多个组件上调用的函数，我想把它放在一个像这样的帮助文件中:

import { useDispatch } from "react-redux";
import { quoteActions } from "../../_actions";
export const nextScreen = () => {
const dispatch = useDispatch();
dispatch(quoteActions.nextStep());
dispatch(quoteActions.disableContinue(true));
};

然后当我进入一个组件，我必须使用该函数:

import {nextScreen} from '../helpers/';
function Screen1(props){
useEffect(()=>{
props.ref.current.addEventListener("click",nextScreen);
return ()=> props.ref.current.removeEventListener("click",nextScreen);
},[])
return(
...
)
}

如果我在Screen1组件内声明nextScreen，它可以工作，但如果我把它放在一个单独的文件中，为什么?我试着在我声明的nextScreen文件中导入React，但它没有修复它，还尝试返回null

Answer 1

使用钩子(如useDispatch)的函数称为自定义钩子，您需要添加use前缀来帮助linter检查是否违反了钩子规则。

export const useNextScreen = () => { ... };

除了错误之外，这段代码不能工作，因为必须在顶层调用钩子，逻辑应该是:

import { nextScreen } from "../helpers/";
function Screen1(props) {
const dispatch = useDispatch();
useEffect(() => {
const nextScreen = () => {
dispatch(quoteActions.nextStep());
dispatch(quoteActions.disableContinue(true));
};
props.ref.current.addEventListener("click", nextScreen);
return () => props.ref.current.removeEventListener("click", nextScreen);
}, [dispatch]);
return <></>;
}