Javascript 如何正确循环数组以形成关联映射

我正在创建一个小应用程序，给定船只的纬度和经度，它将定位船只并在

谷歌地图上显示其徽标。
我绘制了每个公司和每个标志。现在，在浏览了这些公司之后，我想联想一下它的标志。我在将公司与物联网徽标关联时遇到问题。
下面是一组代码，它们完成了我需要的操作，但循环尚未完成：

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;

但仍然无法解决将公司与自身形象联系起来的循环问题。
我做错了什么？我走的方向对吗？
感谢您为解决此问题指明了正确的方向。
尝试使用


const shipCompanyMap={
A船：“A公司”，
B船：“B公司”，
船舶C：“C公司”，
//其他公司。。。
};
常数companyImageMap={
“A公司”：“../src/logos/COMPANY_A.jpg”，
“COMPANY-B”：“../src/logos/COMPANY_B.png”，
“COMPANY-C”：“../src/logos/COMPANY_C.png”，
//其他标志。。。
};
const associationMap=Object.values（shipCompanyMap）.reduce（（acc，curr）=>({
…acc，
[curr]：公司图像映射[curr]，
}), {});
log（associationMap）
First->
const companyImageMap={COMPANY-A:'../src/logos/COMPANY_A.jpg'，..}
是无效的Javascript，您提供的代码甚至没有使用
Ship
@Keith，感谢您阅读此问题。我写了
Ship
，因为我认为这可能是使用它来构造serach的一个好方法，但我不知道如何在代码中提供它来操作循环。感谢阅读此问题。我仍然无法想象地图上的标志。这是因为我想做的循环丢失了吗？
Ship
是否仍将被使用？抱歉，我有点困惑。制作一个沙盒（codesandbox.io）如果没有它，它只能猜测甲烷，是沙盒。它不起作用，“表未定义”，而且，这不是导入图像的方式，使用这样的路径将不起作用，我将添加一个示例抱歉，我错过了一个模块。我刚刚从'reactstrap'添加了缺少的
import{Table}在沙箱中
return (
            <div>
                <img src={shipImage} alt="ships" /> // <-- Loop here vessel to match it with its logo
            </div>