问地图内部的映射反应(一个是局部图像数组，另一个是来自json的标题)
EN

Stack Overflow用户

提问于 2018-07-04 03:14:22

回答 2查看 763关注 0票数 1

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

javascript

reactjs

ecmascript-6

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-07-04 03:30:01

您目前正在为每个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} />;
});

票数 1

Stack Overflow用户

发布于 2018-07-04 04:08:16

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

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