Вложение функции карты в функцию карты в React.JS - PullRequest
Новая
       7

Вложение функции карты в функцию карты в React.JS

0 голосов
/ 21 марта 2019

Я пытаюсь вложить функцию карты, которая извлекает данные из файла JSON. Моя внешняя карта работает нормально. функция внутренней карты, кажется, выдает ошибки, говоря, что это не «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;

Вот мой JSON-файл с именем ClientListData.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"
    }
]
}
]

1 Ответ

1 голос
/ 22 марта 2019

Должно быть: 

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

Вам не хватает ключа theClients.

...