reactjs - 从 API 加载动态 NavItem 不起作用

Question

我必须根据用户的角色为每个用户创建一个自定义的动态导航栏，所以我试图NavItem通过一个将 a 作为输入的 API加载（获取） userid，API 成功返回预期结果（到我定义的navdashboardconst 数组中）在渲染NavItem组件之前

但是没有 NavItem从我的 JSON 数组中显示，请找到以下我使用的代码：

import logoEretraite from 'assets/img/logo/e_retraite.png';
import sidebarBgImage from 'assets/img/slidbar.jpg';
import React from 'react';
import { MdDashboard } from 'react-icons/md';
import { NavLink } from 'react-router-dom';
import { Nav, Navbar, NavItem, NavLink as BSNavLink } from 'reactstrap';
import bn from 'utils/bemnames';
import API from '../../pages/API';
const api = new API();

const sidebarBackground = {
  //backgroundImage: `url("${sidebarBgImage}")`,
  backgroundSize: 'cover',
  backgroundRepeat: 'no-repeat',
};

const navdashboard = [];

api
  .ApiGetTB(sessionStorage.getItem('user_id'))
  .then(response => response.json())
  .then(
    data => {
      data.map(t =>
        navdashboard.push({
          to: '/',
          name: t.nom,
          id: t.id,
          exact: false,
          Icon: MdDashboard,
        }),
      );
    },
    error => {
      console.log('error GetTB');
    },
  );

const bem = bn.create('sidebar');

class Sidebar extends React.Component {
  render() {
    return (
      <aside className={bem.b()} data-image={sidebarBgImage}>
        <div className={bem.e('background')} style={sidebarBackground} />
        <div className={bem.e('content')}>
          <Navbar>
            <img
              src={logoEretraite}
              width="160"
              height="80"
              className="pr-2"
              alt="#"
            />
          </Navbar>

          <Nav vertical>
            {console.log('navdashboard-->', navdashboard)}
            {navdashboard.map(({ to, name, id, exact, Icon }, index) => (
              <NavItem key={index} className={bem.e('nav-item')}>
                <BSNavLink
                  id={`navItem-${name}-${index}`}
                  className="text-uppercase"
                  tag={NavLink}
                  to={{
                    pathname: to,
                    aboutProps: id,
                  }}
                  activeClassName="active"
                  exact={exact}
                >
                  <Icon className={bem.e('nav-item-icon')} />
                  <span className="">{name}</span>
                </BSNavLink>
              </NavItem>
            ))}
          </Nav>
        </div>
      </aside>
    );
  }
}

export default Sidebar;

这是渲染部分的 console.log 结果的结果（它表明navdashboard数组不是空的，它包含想要的结果）：

一些专家可以为我澄清一些事情，知道在 navdashboard使用静态元素进行定义时，例如：

const navdashboard = [{ to:" ", name:"name", id:"1", exact:false, Icon:MdDashboard }];

当点击那个静态元素 NAME 时，API 返回的结果就会显示出来！

谢谢

标签： reactjs

Answer 1

您可能希望在实际组件中获取 API 并将其存储navdashboard在本地状态中。似乎您的 React 组件不知道任何数据更改，navdashboard因此总是返回空数组。

const bem = bn.create('sidebar');

class Sidebar extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     navdashboard: []
   };
 }

 componentDidMount() {
   api
     .ApiGetTB(sessionStorage.getItem("user_id"))
     .then(response => response.json())
     .then(
       data => {
         let dashboardData = data.map(t => ({
           to: "/",
           name: t.nom,
           id: t.id,
           exact: false,
           Icon: MdDashboard
         }));
         this.setState({ navdashboard: dashboardData });
       },
       error => {
         console.log("error GetTB");
       }
     );
 }
 render() {
   return (
     <aside className={bem.b()} data-image={sidebarBgImage}>
       <div className={bem.e("background")} style={sidebarBackground} />
       <div className={bem.e("content")}>
         <Navbar>
           <img
             src={logoEretraite}
             width="160"
             height="80"
             className="pr-2"
             alt="#"
           />
         </Navbar>

         <Nav vertical>
           {console.log("navdashboard-->", navdashboard)}
           {navdashboard.map(({ to, name, id, exact, Icon }, index) => (
             <NavItem key={index} className={bem.e("nav-item")}>
               <BSNavLink
                 id={`navItem-${name}-${index}`}
                 className="text-uppercase"
                 tag={NavLink}
                 to={{
                   pathname: to,
                   aboutProps: id
                 }}
                 activeClassName="active"
                 exact={exact}
               >
                 <Icon className={bem.e("nav-item-icon")} />
                 <span className="">{name}</span>
               </BSNavLink>
             </NavItem>
           ))}
         </Nav>
       </div>
     </aside>
   );
 }
}

export default Sidebar;