React Hook - useCustomHook для установки внешних useState и useRef - PullRequest
Новая
       9

React Hook - useCustomHook для установки внешних useState и useRef

0 голосов
/ 03 августа 2020

У меня есть основной компонент вместе с локальным состоянием с использованием 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? Также я обнаружил, что даже я не использую useEffect в своем customHook, он также работает должным образом, так что мне нужно использовать useEffect в моем custom hook? Любые отзывы и предложения приветствуются!

1 Ответ

0 голосов
/ 03 августа 2020

Во-первых, я считаю плохим подходом использование компонентных методов внутри настраиваемого хука (например, методов "set", предоставляемых useState). Вы связываете ловушку с внутренним логом c главного компонента. Если целью пользовательского хука является получение данных из API, ему необходимо предоставить основному компоненту переменные, которые могут позволить главному компоненту самостоятельно управлять своим состоянием (например, return isFetching, error, data, et c. И не вызывать какой-либо метод основного компонента set внутри хука).

...