在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的异步有关，但我想不出另一种方法来实现这一点。当页面加载到浏览器中时，控制台日志是无序的，来自fetch_permissions中的数据与作为道具发送之前记录的数据完全不同(请参见附件)。我需要做些什么才能解决这个问题？

​

Answer 1

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

使用useState初始化userPermissions阵列。然后，在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();
}, []);