ReactJS无法在Rest API响应中打印嵌套值

问题描述

这是我第一次编写React应用，并使用create-react-app创建示例应用。我正在使用axios调用rest api，它返回我下面嵌套的json。我的组件显示的是第一级属性，但没有嵌套的属性，请帮助您了解我在做什么错。

import groovy.json.*

def jsonSlurper = new JsonSlurper()
def json = '''
{
   "expand": "schema,names","startAt": 0,"maxResults": 50,"total": 21,"issues":    [
            {
         "expand": "operations,versionedRepresentations","id": "217580","self": "issue/217580","key": "ART-4070","fields": {"summary": "#[ART] Pre.3 Verification \\"S\\""}
      },{
         "expand": "operations,"id": "217579","self": "issue/217579","key": "ART-4069","fields": {"summary": "Verification \\"C\\""}
      },"id": "217577","self": "issue/217577","key": "ART-4068","fields": {"summary": "#[ART] Enum type"}
      }
   ]
}
'''
def obj = jsonSlurper.parse(json)

def columns = obj.issues*.keySet().flatten().unique()

// remove nulls
def encode = { e -> e == null ? '' : e  }

// Print all the column names
println columns.collect { c -> encode( c ) }.join( ';' )

// create all the rows
println obj.issues.collect { row ->
    // A row at a time
    columns.collect { colName -> encode( row[ colName ] ) }.join( ';' )
}.join( '\n' )

要解析和显示的JSON：

<Card type="inner" title="Social">
            {social.dataall.map((social1,i) => (
                <div key={i} class="card">
                    <div class="card-body">
                        <h5 class="card-title">Name: {social1.FullName}</h5>
                        
                        {social1.Member1.map(function (member11,j) { 
                        return <div key={j}> <h5>member11</h5></div>
                        
                        {member11.User2.map(function (usr2,k) { 
                        return <div key={k}> <h5>Type: {usr2.firstName}</h5></div>
                        })}
                        })}
                    </div>
                </div>
           ))}
</Card>

{"app":{"dataall":[{"FullName":"Payment","displayName":"Payment","Id":"3366d5e59","Member1":[{"User2":[{"userId":"331322934","firstName":"fName1","lastName":"lName1"}],"Role3":[{"roleName":"Business"}]},{"User2":[{"userId":"331322934","firstName":"fName","lastName":"lName"}],"Role3":[{"roleName":"Owner"}]}]}]}}

无法打印以下类型的值：{usr2.firstName}

解决方法

您将在此处关闭<div>元素：

return <div key={j}> <h5>member11</h5></div>
//                                    ^^^^^^

这意味着以下代码（{member11.User2...）不属于JSX元素。它仅遵循return语句。 return语句后的代码未执行：

(function() {
  console.log("shown");
  return;
  console.log("not shown");
}());

您没有解释如何构造UI，但一个简单的解决方案是将映射移至<div>元素内。

<div class="card-body">
  <h5 class="card-title">Name: {social1.FullName}</h5>
    {
      social1.Member1.map(function (member11,j) { 
        return (
          <div key={j}>
            <h5>member11</h5>
            {
              member11.User2.map(function (usr2,k) { 
                return <div key={k}> <h5>Type: {usr2.firstName}</h5></div>
              })
            }
          </div>
        );
      })
    }
</div>

javascript reactjs reactjs