需要在React中将其作为道具发送之前将数据提取到数组中

Posted 2021-04-13

我正在从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是异步的有关，但我想不出另一种方法来完成此操作。当页面在浏览器中加载时，控制台日志混乱，并且fetch_permissions中的数据与作为道具发送之前记录的数据完全不同（请参阅附件）。我需要怎么做才能解决这个问题？

答案

您需要添加两个钩子：useState和useEffect。

用userPermissions初始化useState数组。然后，在useEffect中，获取您的数据并使用更新程序功能更新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();
}, []);