ReactJS：如何在 JavaScript 中過濾數組以在地圖上顯示特定圖像

Question

我正在使用AISHub API構建一個船可視化器。 在查詢 API 后，我可以獲得一個包含我感興趣的容器的 json 文件，並將這些容器注入一個表中，如下所示：

在打印屏幕上顯示的表格中，有 16 艘船只，但它們來自不同的公司。 顯示的徽標數量正好是 16 個，就像表格的行數一樣。

問題是我只看到一個徽標，而不是桌子上（因此也出現在google-map ）的所有其他公司的徽標。

我已經准備了一個關聯圖，可以在下面的代碼中看到：

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;

在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>
        );
    }
}

到目前為止我做了什么：：

1）這是一個循環問題。 我試圖遍歷由提供的 API 提取的公司，並嘗試將該公司與其徽標匹配並將其顯示在谷歌地圖上，但我不確定如何組織循環，因為我只看到一個徽標而不是更多徽標。

2）在做了一些研究之后，我遇到了過濾功能，並嘗試使用一點來循環遍歷一組徽標。

3）我認為這篇文章正是我要找的，並在研究如何使用它后嘗試申請。 但是，我仍然無法遍歷數組並將每個公司分配給其徽標。

感謝您指出解決此問題的正確方向。

Answer 1

如果我理解正確，這里的問題是<Ship />組件中徽標圖像的呈現需要是動態的。 目前它是靜態的，並且“硬編碼”到glddImage圖像，這就是為什么只顯示一個徽標的原因。

假設<Ship />中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 };

Answer 2

看起來您正在Ship定義中為每艘船設置src ，將其設置為glddImage 。 這不是動態的，並且會為每艘船產生相同的結果。 完成此操作后，您只能嘗試通過您的船只陣列進行映射。 這可以通過在Ship定義中映射您的徽標源來解決。