时间戳

首页 > 解决方案 > 如何正确循环数组以形成关联图

javascript - 如何正确循环数组以形成关联图

问题描述

我正在创建一个小型应用程序，该应用程序从AIS Hub给定船只的纬度和经度，将定位船只并在google-map. 我映射了每个公司和每个徽标。现在，在浏览了这些公司之后，我想关联它的徽标。我在将公司与 iots 徽标关联时遇到问题。下面的代码片段可以满足我的需要，但循环不完整：

import React from 'react';
import { Table } from 'reactstrap';

const shipCompanyMap = {
    Vessel_A: 'COMPANY-A',
    Vessel_B: 'COMPANY-B',
    Vessel_C: 'COMPANY-C',
    // Other companies...
};

const companyImageMap = {
    COMPANY-A: '../src/logos/company_A.jpg',
    COMPANY-B: '../src/logos/company_B.png',
    COMPANY-C: '../src/logos/company_C.png',
    // Other logos...
};

const Ship = ({ ship }) => {
    const shipName = ship.NAME;
    const company = shipCompanyMap[shipName];
    const shipImage = companyImageMap[company];

    return (
        <div>
            <img src={shipImage} alt="ships" /> // <-- Loop here vessel to match it with its logo
        </div>
    );
};

const ShipTracker = ({ ships }) => {
    return (
        <div className="ship-tracker">
            <Table>
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Name</th>
                        <th>Callsign</th>
                        <th>Heading</th>
                        <th>SOG</th>
                        <th>IMO</th>
                        <th>MMSI</th>
                        <th>Longitude</th>
                        <th>Latitudee</th>
                    </tr>
                </thead>
                <tbody>
                    {ships.map((ship, index) => {
                        const { IMO, NAME, CALLSIGN, HEADING, SOG, MMSI, LONGITUDE, LATITUDE } = ship;
                        const cells = [ NAME, CALLSIGN, HEADING, SOG, IMO, MMSI, LONGITUDE, LATITUDE ];
                        return (
                            <tr>
                                <th scope="row">{index}</th>
                                {cells.map((cell) => <td>{cell}</td>)}
                            </tr>
                        );
                    })}
                </tbody>
            </Table>
        </div>
    );
};

export default ShipTracker;

到目前为止我做了什么：

1）我相信这是一个循环问题。我试图循环通过提供的 API 提取的公司并提取其位置，我试图将该公司与其徽标匹配并将其显示在 a 上，google-map但我不确定如何组织循环。

2）在做了一些研究之后，我遇到了过滤功能并尝试使用一点，但意识到这可能不是我需要的，因为我的协会应该是公司 <--> 徽标。

3）我没有传递一个物体。我怀疑我必须将它视为一个数组并开始朝那个方向工作。但由于我没有传递“真实”对象，而是试图制作关联图，因此传递对象并不是一个好方法。

4）我想出了一种returning使用以下渲染方法在船上显示它的方法，但是：

return (
            <div>
                <img src={shipImage} alt="ships" /> // <-- Loop here vessel to match it with its logo
            </div>

但仍然未能解决将公司与自身形象联系起来的循环。我在做什么错？我是否朝着正确的方向前进？感谢您指出解决此问题的正确方向。

标签： javascriptreactjs

解决方案

尝试使用#Array.reduce

const shipCompanyMap = {
  Vessel_A: 'COMPANY-A',
  Vessel_B: 'COMPANY-B',
  Vessel_C: 'COMPANY-C',
  // Other companies...
};

const companyImageMap = {
  'COMPANY-A': '../src/logos/company_A.jpg',
  'COMPANY-B': '../src/logos/company_B.png',
  'COMPANY-C': '../src/logos/company_C.png',
  // Other logos...
};

const associationMap = Object.values(shipCompanyMap).reduce((acc, curr) => ({
  ...acc,
  [curr]: companyImageMap[curr],
}), {});

console.log(associationMap);

此外，这不是您使用 webpack 导入图像的方式。

例如：

import React from 'react';
import logo from './logo.png'; // Tell Webpack this JS file uses this image
console.log(logo); // /logo.84287d09.png

function Header() {
  // Import result is the URL of your image
  return <img src={logo} alt="Logo" />;
}

export default Header;

在你的情况下：

import glddImage from './logos/gldd.png'

const companyImageMap = {
  GREATLAKESDREDGEANDDOCK: glddImage,
  ...
};

推荐阅读