反应JS |映射嵌套对象答案

【问题标题】：ReactJS | Map through nested objects反应JS |映射嵌套对象
【发布时间】：2019-07-10 12:52:13
【问题描述】：

我有以下来自 BE 的对象。我通过 redux 将它加载到我的组件内名为 user 的属性上。这是架构：

{
    user: 'root',
    perm: [
      "admin",
      "write",
      "read",
      "nodata"
    ],
    "auth": {
      "mode1": true,
      "mode2": true,
      "mode3": false
    }
}

实际上，我想要做的是映射auth 字段，并且对于每种模式，在span 中打印每种模式的名称（对象的关键）。

所以，我创建了一个小 renderSpan 方法来创建映射所需的样板：

  renderSpan = (authKey: string): JSX.Element => {
    const { user } = this.props;
    return (
      <div key={authKey}>
        {user && user.auth && <span> {user.auth[securityKey]}</span>}
      </div>
    );
  };

然后我通过它在我的主渲染块上映射：

  renderAuthModes = () => {
    const { user } = this.props;
    return (
      <Fragment>
        {user && user.auth && (
          <div className="container-fluid">
            {JSON.stringify(user.auth, null, 2)} // This prints the 3 modes
              <div>
                {Object.keys(user.auth).map(authKey => this.renderSpan(authKey))}
              </div>
          </div>
        )}
      </Fragment>
    );
  };

我得到的回报是 3 个空跨度的 div。 div 被渲染到 DOM 上，但显示器上没有打印任何内容。 我做错了什么？

应用程序在 React-Redux 和 Typescript 中。

【问题讨论】：

您可能有范围问题，因为您在renderSpan 中检查user，而它不是显式参数。根据声明函数的位置，user 可能确实是 undefined 在 renderSpan 内。因此给你空divs
但是我有安全检查。如果user 和user.auth。怎么可能是未定义的..
愚蠢的我。抱歉打扰各位了。我正在渲染布尔值并期望渲染字符串。感谢您的宝贵时间。

标签： javascript reactjs typescript

【解决方案1】：

 {user.auth.[securityKey]}</span>}

应该是

 {user.auth[securityKey]}</span>}

除此之外一切正常。问题是你只是在渲染一个span标签，里面有一个布尔值，所以内容是空的……试试这样的：

<span> {user.auth[securityKey] ? 'true' :'false'}</span>

【讨论】：

它也一样，我错了，把它放在那里。我console.log(user.auth[securityKey])，我得到了这些键的布尔值。我想我应该自己拿到钥匙。我的意思是，我也想要这些值，但不是跨度。