Javascript 如何从React组件道具中的数组中获取项目并呈现到页面？

我试图让我的导航栏根据用户是否使用React和Redux登录而动态显示不同的内容。事实上，这已经被证明是可管理的，我连接了动作创建者，检查是否有用户对象，然后将isSignedIn属性切换为true并相应地显示内容

挑战在于，我也想在导航栏中显示该用户的个人资料照片。为了做到这一点，我的计划是让action creator启动一个函数，该函数将从数据库firebase获取用户的文档，并将状态中的详细信息返回到navbar组件。然后mapStateToProps将获取该内容并将其移动到道具中，以便我在用户视图上操作

我可以在一定程度上实现这一切，组件启动，从firebase获取用户详细信息需要一点时间，因此在几秒钟内props.user属性为空。这很好，但当它返回用户内容时，它们存储在数组中的对象中，我不知道如何访问它们

因此，this.props.user是一个包含一个对象的数组，该对象具有诸如userDateOfBirth:12-12-2020等键值对。我需要访问这些值。我认为this.props.user.userDateOfBirth或this.props.user[0].userDateOfBirth可以工作，但两者都不能。第一个仅返回“undefined”，第二个返回一个错误，无法读取undefined的属性“userDateOfBirth”

请帮帮我，这让我发疯了

---

我已经更新了这个问题，加入了一些代码，这应该会让问题更容易理解。为了简洁起见，我将render函数排除在navbar组件之外

动作创造者们一个接一个地签名，就像我预期的那样工作。这是我遇到困难的currentUser Action Creator。我已经分享了很多我认为必要的东西，也许有点太多了。谢谢你的帮助

代码如下：

*导航栏组件*

*getUserDocFromDB*

*用户减速器*

*联合收割机减速器*

第二种方法，this.props.user[0].userDateOfBirth是加载数据后访问用户属性的正确方法。在应用程序状态下获取和填充数据时，数组是空的。使用防护装置将防止未定义的错误

假设默认状态为空数组：

this.props.user.length && this.props.user[0].userDateOfBirth

在react中，这是一种称为的模式，可能看起来更像：

{this.props.user.length ? (
  /* Render user component using this.props.user[0] */
) : null}

为了使组件中的用户对象使用更干净，我将默认状态转换为null，并让处理fetch响应的reducer从响应数组中解包。然后，支票被简化为：

{this.props.user ? (
  /* Render user component using this.props.user */
) : null}

---

我希望您使用的是私有路由，然后只需使用window.location.pathname===user/dashboard获取路径名即可？打印用户名：登录 尽量减少tge过滤。。 快乐编码

非常流行，我只想添加它。您可以检查该属性是否存在，如果不存在，则只需呈现任何内容，如他的示例所示。当状态最终加载时，它将强制重新渲染，然后条件将为true，然后您可以显示用户配置文件照片或任何其他组件需要返回的api调用中的信息

---

这就是为什么您可能看到了一种调度加载减缩器的模式，将加载设置为true，直到api返回，然后将其设置为false。您可以检查组件中的加载是否为true，并选择渲染微调器或其他对象

谢谢你的回答，但不幸的是，我仍然不能让这个工作正常。如果用户未登录，我将使用三元运算符有条件地呈现navbar-v1，如果用户已登录，则呈现v2。那很好用。但事实证明，有条件地呈现道具中的内容几乎是不可能的。我认为这是由于数据加载速度不够快，所以我回到流程中，向从Firebase获取用户文档的函数添加了一个额外的异步等待条件。仍然没有成功。任何额外的想法或解决方案都会很好。谢谢。@RoryO'Doherty也许您可以用代码的实际示例片段更新您的问题，或者另外共享正在运行的代码Sandox。如果看不到你真正的代码在做什么，几乎不可能知道哪里出了问题。抱歉，如果我说得太含糊，我是一个相对缺乏经验的开发人员。我已经更新了问题以包含我的代码。提前感谢您的支持。@RoryO'Doherty您能发布更多的NavBar吗？您试图呈现this.props.user的地方就是问题所在。

import {GET_CURRENT_USER} from "../actions/ActionTypes";

const INITIAL_STATE = {
  user: null,
};


export default  (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case GET_CURRENT_USER:
      return  {user: action.payload};
    default:
      return INITIAL_STATE;
  }
  };

import { combineReducers } from "redux";
export default combineReducers({
  user: UserReducer,
});

this.props.user.length && this.props.user[0].userDateOfBirth

{this.props.user.length ? (
  /* Render user component using this.props.user[0] */
) : null}

{this.props.user ? (
  /* Render user component using this.props.user */
) : null}