javascript - 在 React 中将数据作为 prop 发送之前需要将数据提取到数组中

Question

我正在从 API 调用中获取用户的权限。我获得权限并将它们推送到一个数组，该数组将作为 Prop 发送到另一个组件。 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 异步有关，但我想不出另一种方法来完成此任务。当页面在浏览器中加载时，控制台日志乱序，并且 fetch_permissions 中的数据与作为 prop 发送之前记录的数据完全不同(请参阅附件)。我需要做什么来解决这个问题？

Answer 1

您需要添加两个钩子(Hook):useState和useEffect。

使用useState初始化userPermissions数组。然后，在 useEffect 中，获取数据并使用 updater 函数更新 userPermissions。这将触发重新渲染并将最新值传递给子组件。

您可以在此处找到有关此内容以及处理加载和错误状态的更多信息:How to fetch data with React Hooks?

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

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

  fetchPermissions();
}, []);