在 React.JS 中的地图函数中嵌套地图函数

Question

我正在尝试嵌套一个从 JSON 文件中提取数据的地图函数。我的外部地图功能执行良好。内部映射函数似乎抛出错误，说它不是 "item.map is not a function"，我想知道这是否只是一个语法错误或什么。下面是我的 Client.js 文件：

import React, { Component } from "react";
import { Link } from "react-router-dom";
import ClientList from "../Clients/ClientList";
import ClientListData from "../Clients/ClientListData";

class Client extends Component {
render() {
    return (
    <div>
        {ClientListData.map(function(item, i) {
          return (
            <div className="column-wrap list half-green" key={i}>
              <div className="column half title">
                <h3>{item.bannerText}</h3>
              </div>    
              <div className="column half details">
              {item.map(function(innerItem, i) {
                return (   
                  <ClientList imgClass={innerItem.imgClass} imgSrc={innerItem.imgSrc} imgAlt={innerItem.imgAlt} imgText={innerItem.imgText} year={innerItem.year} /> 
                );
              })}
              </div>   
            </div>
            );
        })}
    </div>
    )

}
}
export default Client;

我有一个名为 ClientList.js 的文件，我正在将其导入 Client.js：

 import React, { Component } from "react";
 import { Link } from "react-router-dom";
 import ClientListData from "../Clients/ClientListData";

 class ClientList extends Component {
 render() {
     return (
          <div className="client-details">
            <div className="logo-wrap">
              <img className={this.props.imgClass} src={this.props.imgSrc} alt={this.props.imgAlt} />
            </div>
            <span className="client">
              {this.props.imgText}
            </span>
            <ul>
              <li>{this.props.year}</li>
            </ul>
          </div>
     );
 }
 }
 export default ClientList;

这是我的 JSON 文件，名为 ClientListData.json：

[
  {
"bannerText": "Over  Million",
"theClients" :[
     {
      "imgClass": "logo pcb",
      "imgSrc": "logos/PCB@2x.png",
      "imgAlt": "Panama City Beach",
      "imgText": "Panama City Beach",
      "year": "2016 | AOR"
    }
 ]
  },

  {
"bannerText": " - 10 Million",
"theClients" :[
       {
      "imgClass": "logo pcb",
      "imgSrc": "logos/PCB@2x.png",
      "imgAlt": "Panama City Beach",
      "imgText": "Panama City Beach",
      "year": "2016 | AOR"
    },
     {
      "imgClass": "logo pcb",
      "imgSrc": "logos/PCB@2x.png",
      "imgAlt": "Panama City Beach",
      "imgText": "Panama City Beach",
      "year": "2016 | AOR"
    },
     {
      "imgClass": "logo pcb",
      "imgSrc": "logos/PCB@2x.png",
      "imgAlt": "Panama City Beach",
      "imgText": "Panama City Beach",
      "year": "2016 | AOR"
    }
]
}
]

Answer 1

应该是：

item.theClients.map(function(innerItem, i) {

您缺少 theClients 密钥。

在 React.JS 中的地图函数中嵌套地图函数

Nesting a map function within a map function in React.JS

javascript

json

reactjs

map-function