Блог

Я работаю над проектом, в котором useAuthProvider вызывает эффект использования для выполнения рендеринга. Как мне этого избежать?

 const authProvider = useAuthProvider();
const [loading, setLoading] = useState(true);
const [loaded, setLoaded] = useState(false);
const [roles, setRoles] = useState([]);

useEffect(() => {
    authProvider()
      .then((data) => {
        setRoles(data);
        setLoaded(true);
      })
      .catch((err) => {
        console.error(err);
      })
      .finally(() => {
        setLoading(false);
      });
}, [authProvider]);
 

Каждый раз, когда этот крючок запускается, AuthProvider является объектом, поэтому поверхностное сравнение эффекта использования всегда будет оцениваться как ложное.

Я тоже попробовал просто вытащить нужную мне функцию.

 const {getRoles} = useAuthProvider()
 

Однако функция getRoles также всегда будет иметь значение false в зависимостях useEffect, поскольку useAuthProvider создает новый экземпляр функции при каждом рендеринге.

Похоже, это может быть хорошим вариантом использования для обратного вызова. Но мы сталкиваемся с точно такой же проблемой.

 const getRolesCallback = useCallback(
    () => authProvider.getRoles(),
    [authProvider]
  );
 

useCallback имеет точно такую же проверку зависимостей, при которой AuthProvider принимает значение false, и поэтому useCallback обновляет функцию и снова запускает эффект использования.

Я смотрел на некоторые из кода администратора react, где они на самом деле используют useCallback таким образом, но я не вижу, как он что-то делает.

Это из /ra-core/src/auth/useGetPermissions.ts

 const useGetPermissions = (): GetPermissions => {
    const authProvider = useAuthProvider();
    const getPermissions = useCallback(
        (params: any = {}) => authProvider.getPermissions(params),
        [authProvider]
    );

    return authProvider ? getPermissions : getPermissionsWithoutProvider;
};
 

Не будет ли этот обратный вызов бесполезен, потому что зависимость AuthProvider каждый раз будет иметь значение false? Я что-то упускаю?

Спасибо за любую помощь.

Насколько я вижу, вам вообще не нужно включать authProvider в свои зависимости, [] для вашего варианта использования подойдет просто пустой массив. Пустой массив для параметра зависимости (2-й) означает, что крючок будет просто запущен при первоначальном рендеринге.