javascript - ReactJS |通过嵌套对象进行映射

Question

我有以下来自 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>
    );
  };

然后我将它映射到我的主渲染 block 上:

  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。

Answer 1

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

应该是

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

除此之外，一切都正常。问题是您只是渲染一个内部带有 bool 值的 span 标记，因此内容将为空...尝试如下操作:

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