Карта внутри карты в реакции (одно - локальный массив изображений, а другое - название из json)

Question

Будучи дизайнером и новичком, чтобы реагировать, я разработал код, в котором локальный массив отображается как изображение, а данные json - как заголовок. Заголовки работают нормально, но изображения не отображаются и показывают все массивы в атрибуте src.

Я использовал Axios.get () для получения данных с сервера.

Я где-то упускаю логику при разработке карты внутри карты. Буду признателен за помощь.

РЕДАКТИРОВАТЬ: Я хочу одно изображение с одним заголовком.

CommonMeds.js

import React, { Component } from 'react';
import './CommonMeds.scss';
import MedSection from '../../Components/MedSection/MedSection';
import Axios from 'axios';

class CommonMeds extends Component {
    state = {
        MedTitle: [],
        TitleImg: [
        { imageSrc: require('../../../../images/medstype_1.svg') },
        { imageSrc: require('../../../../images/medstype_2.svg') },
        { imageSrc: require('../../../../images/medstype_3.svg') },
        { imageSrc: require('../../../../images/medstype_4.svg') },
        { imageSrc: require('../../../../images/medstype_5.svg') },
        { imageSrc: require('../../../../images/medstype_6.svg') },
        { imageSrc: require('../../../../images/medstype_7.svg') },
        { imageSrc: require('../../../../images/medstype_8.svg') },
        { imageSrc: require('../../../../images/medstype_9.svg') },
        { imageSrc: require('../../../../images/medstype_10.svg') },
    ]

};

componentDidMount() {  
    const medInfo = Axios.get('URL OF JSON DATA');
    medInfo.then( response => {
        this.setState({MedTitle: response.data.result});
    });
}

render() {
    const Meds = this.state.MedTitle.map(med => {
        const imglable = this.state.TitleImg.map(src => {
            return src.imageSrc;
        })
        return <MedSection
            Title={med.medicationCategory}
            src = {imglable} 
            />;
    });

    return(
        <div className="container">
            <h3 className="text-left">Common Medicines with Categories</h3>
            <hr />
            {Meds}
        </div>
    );
}

}

export default CommonMeds;

MedSection.js

import React from 'react';
import './MedSection.scss';
import MedicineList from '../MedicineList/MedicineList';


const MedSection = (props) => {

    return (
        <div className="col-12">
            <div className="row">
                <div className="col-12 col-md-3 col-lg-2 px-0">
                    <div className="c-medsimg-box py-4 px-2">
                        <img src={props.src} alt="Medication Type Icon" className="img-fluid" />
                        <h5 className="mt-3" key={props.key}>{props.Title}</h5>
                    </div>
                </div>
                <div className="col-12 col-md-9 col-lg-10">
                    <div className="h-100 d-flex align-items-center">
                        <ul className="c-medslist-ul pl-0 mb-0">
                            <MedicineList />
                        </ul>
                    </div>
                </div>
            </div>
            <hr />
        </div>
    )
}

export default MedSection;

Answer 1

Пока длина обоих массивов одинакова, он будет работать. Попробуйте использовать это.

const imglable = this.state.TitleImg.map(src => {
       return src.imageSrc;
    })

const Meds = this.state.MedTitle.map((med, index) => {
     return <MedSection
             Title={med.medicationCategory}
              src = {imglable[index]} 
            />;
});

Answer 2

В настоящее время вы создаете массив изображений для каждого MedTitle. Вместо этого вы можете взять запись из TitleImage, которая имеет тот же индекс, что и текущий med в вашем цикле.

Вы также можете сделать его безопасным, используя оператор %, так что если ваш массив MedTitle больше, чем массив TitleImage, вы все равно получите изображение.

const Meds = this.state.MedTitle.map((med, index) => {
  const src = this.state.TitleImg[index % this.state.TitleImg.length].imageSrc;

  return <MedSection Title={med.medicationCategory} src={src} />;
});