Javascript react中Map内部的Map（一个是图像的本地数组，另一个是来自json的标题）

作为一名设计师和新手，我开发了代码，其中本地数组显示为图像，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;

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;

import React，{Component}来自'React'；
导入“/CommonMeds.scss”；
从“../../Components/MedSection/MedSection”导入MedSection；
从“Axios”导入Axios；
类CommonMeds扩展组件{
状态={
名称：[]，
标题mg：[
{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（'JSON数据的URL'）；
然后（响应=>{
this.setState（{medtile:response.data.result}）；
});
}
render（）{
const Meds=this.state.MedTitle.map（med=>{
const imglable=this.state.TitleImg.map（src=>{
返回src.imageSrc；
})
返回；
});
返回(
常用药物分类

{Meds}
);
}
}
出口默认的普通药品；

MedSection.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;

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;

从“React”导入React；
导入“/MedSection.scss”；
从“../MedicineList/MedicineList”导入MedicineList；
const medcreation=（道具）=>{
返回(
{props.Title}



)
}
导出默认值部分；

您当前正在为每个

MedTitle

创建一个图像数组。您可以从

TitleImage

中获取与循环中当前

med

索引相同的条目

您还可以使用

%

操作符使其安全，这样，如果

medtile

数组大于

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} />;
});

const Meds=this.state.MedTitle.map（（med，索引）=>{
const src=this.state.TitleImg[索引%this.state.TitleImg.length].imageSrc；
返回；
});

只要两个数组的长度相同，它就可以工作。 试着用这个

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]} 
            />;
});

const imglable=this.state.TitleImg.map（src=>{
返回src.imageSrc；
})
const Meds=this.state.MedTitle.map（（med，index）=>{
返回；
});

对于每个

MedTitle

您正在创建一个

MedSection

，您将为其提供一个包含所有图像的数组

imglable

。是否要将

medtilemg

中的第一个图像与

TitleImg

中的第一个图像一起使用，依此类推？@Tholle是的，我想要一个图像和一个标题。谢谢，太好了。当您的请求完成时，

MedTitle

数组的长度是否总是与

TitleImg

数组的长度相同，或者它们的长度是否不同？是的，带“%”的索引工作得非常好。谢谢你的帮助。这也非常有效。唯一缺少的参数是“索引”。它澄清了我的许多概念。谢谢你宝贵的回答。