我正在使用 AISHub APIs 构建船可视化器。查询 API 后,我可以获得一个包含我感兴趣的容器的 json 文件,并将这些容器注入(inject)到表中,如下所示:
打印屏幕上显示的表格中有 16 艘船只,但它们来自不同的公司。显示的 Logo 数量正好是 16,就像表格的行数一样。
问题是我只看到一个 Logo ,而不是表格上(以及 google-map
)上出现的所有其他公司的 Logo 。
我已经准备好了关联图,可以在下面的代码中看到:
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 文件中,我渲染 Logo ,并且(我认为)我应该进行过滤或搜索,以确保与显示在 GoogleMap.js 上的公司相对应的 Logo map 显示:
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 提取的公司,并尝试将该公司与其 Logo 相匹配并将其显示在谷歌地图上,但我不确定如何组织循环,因为我只看到一个 Logo 而不是更多 Logo 。
2)经过一些研究后,我发现了 filtering function并尝试使用一点来循环遍历一组 Logo 。
3) 我认为 this post正是我正在寻找的东西,并在研究如何使用它后尝试应用它。但是,我仍然无法循环遍历数组并将每个公司分配给其 Logo 。
感谢您指出解决此问题的正确方向。
最佳答案
如果我理解正确,这里的问题是 <Ship />
中 Logo 图像的呈现组件需要是动态的。目前它是静态的,并且“硬编码”到 glddImage
图像,这就是为什么只显示一个 Logo 的原因。
假设ship.NAME
的值在<Ship />
是 "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 };
关于javascript - ReactJS:如何在 JavaScript 中过滤数组以在 map 上显示特定图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60120561/