Нужно извлекать данные в массив ПЕРЕД отправкой их в качестве опоры в React

Question

Я получаю разрешения пользователя от вызова API. Я получаю разрешения и помещаю их в массив, который будет отправлен в качестве опоры другому компоненту. Функция fetch_permissions возвращает именно то, что мне нужно, но, похоже, она не ждет завершения функции перед отправкой неполных данных. Вот мой код:

// src/components/NavBar.js

import React from "react";
import { useAuth0 } from "../react-auth0-spa";
import { Link } from "react-router-dom";

import AccessControl from './accessControl';

const NavBar = () => {
  const { isAuthenticated, loginWithRedirect, logout, getTokenSilently } = useAuth0();
  const userPermissions =[];
  
 

  //fetch permissions
  async function fetch_permissions(){
    try {
      const token = await getTokenSilently();
      const response = await fetch("/permissions", {
        headers: {
          Authorization: `Bearer ${token}`
        }
      });

      const permissions = await response.json();
      console.log(permissions);
      for (let i = 0; i < permissions.length; i++) {
        let permission = permissions[i];
        userPermissions.push(permission);
      }
      console.log(userPermissions);
    } catch (error) {
      console.error(error);
    }
  };

  fetch_permissions();
  return (
    <div>
        {/* Links to show regardless of login state */}
        <Link to="/">Home</Link>&nbsp;

        {/* Links to show when logged in */}
        {isAuthenticated && (
        <span>
          
            <Link to="/profile">Profile</Link>
            {console.log(userPermissions)}
            <AccessControl userPermissions={userPermissions} allowedPermissions={["admin:admin"]} protectedResource={<Link to="/administration">Admin</Link>} />
            <Link to="/external-api">External API</Link>
            <button onClick={() => logout()}>Log out</button>
        </span>
        )}
    
        {/* Show if not logged in */}
        {!isAuthenticated && (
          <button onClick={() => loginWithRedirect({})}>Log in</button>
        )}

    </div>
  );
};

export default NavBar;

Я знаю, что это как-то связано с асинхронностью javascript, но я не могу придумать другой способ сделать это sh. Когда страница загружается в браузере, журналы консоли выходят из строя, и данные в пределах fetch_permissions полностью отличаются от данных, записанных непосредственно перед отправкой в ​​качестве реквизита (см. Приложение). Что мне нужно сделать, чтобы решить эту проблему?

Answer 1

Вам необходимо добавить два хука: useState и useEffect.

Инициализировать массив userPermissions с помощью useState. Затем, в пределах useEffect, получите данные и обновите userPermissions, используя функцию обновления. Это вызовет повторную визуализацию и передаст новейшее значение дочернему компоненту.

Более подробную информацию об этом, а также обработку состояний загрузки и ошибок можно найти здесь: Как получить данные с помощью React Hooks?

const [userPermissions, setUserPermissions] = React.useState([]);

React.useEffect(() => {
  async function fetchPermissions() {
    try {
      // ...
      const permissions = response.json();
      setUserPermissions(permissions);
    } catch (error) {
      // ...
    }
  }

  fetchPermissions();
}, []);