ReactJS：如何在JavaScript中过滤数组以在地图上显示特定图像

我正在使用创建一个船可视化工具。查询API后，我能够获得我感兴趣的容器的json文件，并将这些容器注入表中，如下所示：

在打印屏幕上显示的表格中，有16个容器，但它们来自不同的公司。显示的徽标数正好是16，与表中的行数相同

问题是，我只看到一个徽标，而不是桌子上所有其他公司的徽标（因此在

谷歌地图上）

我已经准备了一个关联图，可以在下面的代码中看到：

ShipTracker.js：

import donjonImage from '../logos/donjon.jpg';
import dutraImage from '../logos/dutra.png';
import glddImage from '../logos/greatlakesdredgeanddock.png';

const shipCompanyMap = {
  Michigan: 'DONJON',
  STUYVESANT: 'DUTRA',
  Ellis_Island: 'GREATLAKESDREDGEANDDOCK'
};

const companyImageMap = {
  DONJON: donjonImage,
  DUTRA: dutraImage,
  GREATLAKESDREDGEANDDOCK: glddImage,
};

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];

  return (
    <div>
      <img src={glddImage} alt="Logo" /> // <-- I think loop should go here?
    </div>
  );
};
export { Ship };

const ShipTracker = ({ ships }) => {
  const handleRowClick = (rowValue) => {
    console.log(rowValue);
  };
  return (
    <div className="ship-tracker">
      <Table className="flags-table" responsive hover>
        <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 onClick={() => handleRowClick(ship)} key={index}>
                <th scope="row">{index}</th>
                {cells.map((cell) => <td>{cell}</td>)}
              </tr>
            );
          })}
        </tbody>
      </Table>
    </div>
  );
};

export default ShipTracker;

从“../logos/donjon.jpg”导入donjonImage；
从“../logos/dutra.png”导入dutraImage；
从“../logos/greatlakesdredgeandock.png”导入GLD图像；
const shipCompanyMap={
密歇根州：“东戎”，
STUYVESANT：“DUTRA”，
Ellis_岛：“Greatlakesdredgeandock”
};
常数companyImageMap={
唐戎：唐戎形象，
DUTRA:dutraImage，
Greatrakesdredgeandock:glddImage，
};
const associationMap=Object.values（shipCompanyMap）.reduce(
（会计科目，当前）=>({
…acc，
[货币]：公司图像地图[货币]
}),
{}
);
常量Ship=（{Ship}）=>{
const shipName=ship.NAME；
const company=船舶公司映射[船舶名称]；
const shipImage=公司图像映射[公司]；
返回(
//  {
常量handleRowClick=（行值）=>{
console.log（rowValue）；
};
返回(
#
名称
呼号
标题
索格
依我所见
MMSI
经度
拉蒂图迪
{ships.map（（ship，index）=>{
常量{IMO，名称，呼号，航向，SOG，MMSI，经度，纬度}=船舶；
常量单元格=[名称、呼号、标题、SOG、IMO、MMSI、经度、纬度]；
返回(
HandlerRowClick（ship）}键={index}>
{index}
{cells.map（（cell）=>{cell}）
);
})}
);
};
导出默认ShipTracker；

在GoogleMap.js文件中，我呈现徽标的位置和（我认为）我应该进行过滤或搜索，以确保显示与地图上显示的公司对应的徽标：

import { Ship } from '../components/ShipTracker';

class BoatMap extends Component {
    constructor(props) {
        super(props);
        this.state = {
            buttonEnabled: true,
            buttonClickedAt: null,
            progress: 0,
            ships: []
        };
        this.updateRequest = this.updateRequest.bind(this);
        this.countDownInterval = null;
    } 

    // Other operations.....

    render() {
        return (
            <div className="google-map">
                <GoogleMapReact
                    bootstrapURLKeys={{ key: 'My_KEY' }}
                    center={{
                        lat: 42.4,
                        lng: -71.1
                    }}
                    zoom={8}
                >
                    {this.state.ships.map((ship) => (    // <-- maybe the filter function here?
                        <Ship ship={ship} key={ship.CALLSIGN} lat={ship.LATITUDE} lng={ship.LONGITUDE} />
                    ))}


                </GoogleMapReact>
            </div>
        );
    }
}

从“../components/ShipTracker”导入{Ship}；
类BoatMap扩展组件{
建造师（道具）{
超级（道具）；
此.state={
按钮启用：正确，
buttonClickedAt:null，
进展：0，
船舶：[]
};
this.updateRequest=this.updateRequest.bind（this）；
this.countDownInterval=null；
} 
//其他行动。。。。。
render（）{
返回(
{this.state.ships.map（（ship）=>（//看起来您正在为
船舶
定义中的每艘船舶设置
src
，将其设置为
glddImage
。这不是动态的，将为每艘船舶生成相同的结果。您只会在完成此操作后尝试通过船舶数组进行映射。通过so映射可以解决此问题
Ship
定义内的徽标来源如果我理解正确，这里的问题是
组件中徽标图像的呈现需要是动态的。目前它是静态的，并且“硬编码”到
glddImage
图像，这就是为什么只显示一个徽标的原因

假设
中
ship.NAME
的值为
“Michigan”
、
“STUYVESANT”
或
“Ellis_Island”
中的任意一个，则以下更新应完成您的实现：

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

  /* Optional */
  const defaultFallbackImage = "../path/to/image-not-found-placeholder.png"

  /* Use fallback image if no company image found */
  const shipImage = companyImageMap[company] || defaultFallbackImage;

  return (
    <div>
      {/* Render shipImage image */}
      <img src={shipImage} alt="Logo" />
    </div>
  );
};

export { Ship };

const Ship=（{Ship}）=>{
const shipName=ship.NAME；
const company=船舶公司映射[船舶名称]；
/*可选的*/
const defaultFallbackImage=“../path/to/image未找到占位符.png”
/*如果未找到公司映像，请使用回退映像*/
const shipmimage=companyImageMap[company]| | defaultFallbackImage；
返回(
{/*渲染shipImage图像*/}
);
};
出口{Ship}；
你完全理解我的问题，多亏你的帮助，我解决了它！！！：）非常感谢！！