reactjs - react js：使用地图方法显示项目

Question

我也想在 div 中显示子模块名称这是我的 api 数据

"predefined": [
        {
            "id": 2,
            "mainModule": "bonding",
            "description": "some random description 2",
            
            "sub_module": [
                {
                    "id": 3,
                    "subModuleName": "activity of bonding",
                    "completed": false
                },
                {
                    "id": 4,
                    "subModuleName": "self care",
                    "completed": false
                }
            ]
        },
        {
            "id": 1,
            "mainModule": "main module 1",
            "description": "some random description",
         
            "sub_module": [
                {
                    "id": 1,
                    "subModuleName": "sub module 1",
                    "completed": false
                },
                {
                    "id": 2,
                    "subModuleName": "sub module 2",
                    "completed": false
                }
            ]
        }
    ],

这是我的 axios 从 api 获取数据并设置我的名为 items 的状态

   axios
      .get(
        "url",
        config
      )
      .then((res) => {
      
        this.setState({ items: res.data.predefined });
       

       
      });
  }

这是我用来在这里显示我的 api 的jsx，personData.mainmodule并且personData.description工作正常，因为子模块名称在一个数组中，没有渲染我不能使用它 {personData.sub_module[0].subModuleName}

   {this.state.items.map((personData) => {
              return (
                <>
                
                  <div className="activity">
                   
                  
                        <h3>{personData.mainModule}</h3>
                      
                      
                        
                            <span>{personData.description}</span>
                       
                     
                          {this.state.item.map((personData) => {
                            return (
                              <>
                                {personData.sub_module.subModuleName}  //error
                              </>
                            );
                          })}
                        </div>
                       
                </>
              );
            })}

标签： reactjs

Answer 1

您应该使用当前personData变量来访问sub_module属性。然后你用另一个Array.map来渲染它。

{
    personData.sub_module.map(item => {
        return (
            <>
                {item.subModuleName}
            </>
        );
    })
}