时间戳

首页 > 解决方案 > 使用 useEffect 时，未定义第一次渲染时传入 React Route 的道具

reactjs - 使用 useEffect 时，未定义第一次渲染时传入 React Route 的道具

问题描述

我目前正在使用这种渲染方法

<Route exact path='/bulletinboard' render={(props) => <BulletinBoard {...props} loginList={loginList} />} />

将loginList状态传递给组件BulletinBoard，以便我可以确定用户是否是管理员，然后让页面加载，如果不是，则重定向到主页。

但是，当我尝试检索组件中的道具时，我认为它在第一次渲染时显示为空，因此alert在我的filter函数中第一次弹出您没有权限，然后在按确定后，第二次因为您有权访问，因为道具已被检索。.

以下是我的代码框，以便于代码参考：

编辑 epic-feather-l72oh

标签： reactjsreact-routerreact-router-dom

解决方案

首先，您在这里不需要async函数，从中获取道具props不是需要等待的东西，它不是 a Promise，您只是在处理对象的属性。

其次，您的用法filter不正确。的目的filter是返回一个新的项目数组，它只匹配你提供的谓词，这绝对不是你想要做的。

我有一个预感你想使用some它，它返回数组中的任何元素是否与谓词匹配。这是我所做的，它对我有用，如果这是你想要的，请告诉我

import { useEffect } from "react";

const BulletinBoard = (props) => {
  useEffect(() => {
    const loginListFromParent = props.loginList;
    console.log(loginListFromParent);
    const isAdmin = loginListFromParent.some( item => item.permissionName.includes("Admin"))
    const message = isAdmin ? 'You have access to this page' : 'You have no permissions to access this page';
    alert(message);
  }, []);

  return (
    <div>
      <h1>Bulletin Board</h1>
    </div>
  );
};

export default BulletinBoard;

推荐阅读