React Hook-useCustomHook设置在useState和useRef之外

Question

我有主组件以及使用useState和useRef的本地状态，我还有另一个自定义钩子，在自定义钩子内我想重置我的主组件的状态和ref，我在下面做得正确吗？

// custom hook
const useLoadData = ({startLoad, setStartLoad, setLoadCompleted, setUserNameRef}) => {
useEffect(() => {
const fetchUser = async() => { await fetchFromApi(...); return userName;};

if (startLoad) {
const newUserName = fetchUser();
setStartLoad(false);
setLoadCompleted(true);
setUserNameRef(newUserName);
}

}, [startLoad]);
}
// main component
const myMainComp = () {
const [startLoad, setStartLoad] = useState(false);
const [loadCompleted, setLoadCompleted] = useState(false);
const userNameRef = useRef("");
const setUserNameRef = (username) => { this.userNameRef.current = username; }
useLoadData(startLoad, setStartLoad, setLoadCompleted, setUserNameRef);
refreshPage = (userId) => {
setStartLoad(true);
}
}

通过传入所有外部状态值和setState方法，我是否正确地使用了自定义挂钩？此外，我发现即使我在customHook中不使用useEffect，它也能按预期工作，所以我需要在自定义钩子中使用useEffect吗？欢迎任何评论和建议！

Answer 1

首先，我认为在自定义钩子中使用组件方法(如useState提供的"set"方法(不是一个好方法。您正在将钩子与主要组件的内部逻辑绑定在一起。如果自定义hook的目的是从API获取数据，则需要向主组件提供能够使主组件自己操作其状态的vars(如返回isFetching、error、data等，并且不在hook内部调用任何主组件set方法(。