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>
    );
  };

然后我将其映射到主渲染块上

  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>}

除此之外，一切正常。问题是您只是在渲染一个span标记，里面是一个布尔值，所以内容将是空的。尝试这样的事情：

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

ReactJS |映射嵌套对象

1 个答案: