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键。

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

1 个答案: