在React.JS中的地圖函數中嵌套地圖函數

Question

我試圖嵌套一個映射函數，該函數從JSON文件中提取數據。 我的外部map函數執行得很好。 內部map函數似乎拋出錯誤，說它不是“ item.map不是函數”，我想知道這僅僅是語法錯誤還是什么。 以下是我的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;

這是我的名為ClientListData.json的JSON文件：

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

  {
"bannerText": "$5 - 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鍵。