Question

我正在建立一个关联地图，该地图将公司与其loogo相匹配。目的是在google-map上显示此徽标。

我正在填写协会地图公司<->徽标，但我意识到某些船只的名称具有空白，如下所示，我不知道如何解决该问题：

问题，我遇到的问题是如何制作带有空白的关联图？这样，我会收到编译错误，并且不知道如何解决该问题：

以下代码段：

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

const shipCompanyMap = {
    VesselA: 'COMPANY-A',  //<-- No white space in 
    Vessel B: 'COMPANY-B',   // <-- white space
    Vessel C: 'COMPANY-C',    // <-- white space
    // 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]
    }),
    {}
);

const Ship = ({ ship }) => {
    const shipName = ship.NAME;
    const company = shipCompanyMap[shipName];
    const shipImage = companyImageMap[company] || defaultImg;
    return (
        <div>
            {/* Render shipImage image */}
            <img src={shipImage} alt="Logo" />
        </div>
    );
};
export { Ship };

我到目前为止所做的事情：

我怀疑我必须将其视为数组，并开始朝这个方向工作。但是由于我没有传递“真实的”对象，而是试图创建一个关联图，所以传递该对象不是一个好方法，并且在理解如何处理空白方面存在一些问题。
我不确定是否必须replace空白。但我不这样认为，因为某些容器的名称如上所示是空格。
我遇到了trimming函数，该函数似乎正在做某事，但是我不确定如何使用它。

我的印象是空白应该被忽略（或修剪），但是我不确定这是否是正确的方法。

Answer 1

您可以引用您的密钥：

const shipCompanyMap = {
    "VesselA": 'COMPANY-A',  //<-- No white space in 
    "Vessel B": 'COMPANY-B',   // <-- white space
    "Vessel C": 'COMPANY-C',    // <-- white space
    // Other companies...
};

但是在现实世界中，这可能不再重要，因为无论如何您都可能会通过JSON从服务中加载数据。

我喜欢使用经过标准化处理的键，因此我将用[_]替换所有[^ a-zA-Z0-9]字符，并且我可能会完全删除空格，并将所有字符都换成小写。在大多数情况下，出于快速查找的目的，您不必关心实际值。您甚至可能只是将归一化值的哈希值用作键。

如何制作包含空白的关联图

1 个答案: