React Hook - useCustomHook 设置外部 useState 和 useRef答案

【问题标题】：React Hook - useCustomHook to set outside useState and useRefReact Hook - useCustomHook 设置外部 useState 和 useRef
【发布时间】：2020-11-23 19:37:41
【问题描述】：

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

// 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 吗？欢迎任何评论和建议！

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

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

【讨论】：

有道理！但是在我的情况下，我如何使用自定义挂钩的返回值来重置我的主要组件状态和参考？我知道自定义钩子可以返回一些东西，但是我应该在哪里放置我的代码以使用返回值并在我的主要组件中设置？
我能想到的一种方法是在我的主组件const userName = useLoadData(startLoad) 中将userNameRef 转换为本地状态，然后在我的主组件中创建另一个useEffect 来监视这个userName，但是如何我可以知道并设置loadCompleted 吗？也感觉这种来回操作……
我认为在你的情况下更好的方法是不要使用自定义钩子并将所有逻辑移动到主要组件。将主组件的状态与代码的副作用（api fetch）联系起来会更容易，而不必在钩子和主组件中保留变量。
但是如果你想保持钩子，你的方法并没有错……你需要将行为与useEffect同步，最终暴露更多的变量并将其内容关联到useEffect中，或者使用钩子返回值本身而不是主组件的状态变量