ReactJS-JavaScript：过滤器功能无法正常工作

Question

我正在使用AISHub APIs构建船用可视化器。在查询了API之后，我能够获得包含数千个容器的json文件，但是我仅过滤了我感兴趣的容器，并将它们注入到网页的表格中。该API提供以下字段：[NAME, MMSI, LONGITUDE, LATITUDE, others...]。我用于过滤的最重要的参数是：NAME和MMSI（尽管可能有多个容器具有相同的NAME，但不能有两个容器具有相同的{{1} }数字，因为它是唯一的。

问题，我遇到的问题是MMSI函数似乎没有正确的行为。 实际上，它并不能针对特定的filter和/或NAME进行唯一过滤，而我最终拥有多个具有相同MMSI和不同NAME的容器。尽管我为该特定容器硬编码了MMSI和NAME，但应该出现的容器也没有出现。 这是无法解释的，因为我对这些数字进行了硬编码以进行专门过滤。

在我用于过滤搜索的代码下面：

MMSI

也在API的典型var express = require('express'); var router = express.Router(); var axios = require('axios'); const NodeCache = require('node-cache'); const myCache = new NodeCache(); let hitCount = 0; /* GET home page. */ router.get('/', function(req, res, next) { res.render('index', { title: 'Express' }); }); const mmsiOfInterest = [ '367029520', // ok -> MICHIGAN '366909730', // ok -> JP BOISSEAU '367128570', // ok -> DELAWARE BAY '366744010', // ok -> ATLANTIC SALVOR // Other MMSI numbers ..... ]; const shipNamesOfInterest = [ 'MICHIGAN', 'JP BOISSEAU', 'DELAWARE BAY', 'ATLANTIC SALVOR', // Other NAMES.... ] router.get('/hello', async function(req, res, next) { const allData = myCache.get('allData'); if (!allData) { hitCount++; console.log(`hit ${hitCount} number of times`); const { data } = await axios.get( 'http://data.aishub.net/ws.php?username=MY_KEY&format=1&output=json&compress=0&latmin=11.42&latmax=58.20&lonmin=-134.09&lonmax=-52.62' ); const [ metaData, ships ] = data; console.log(data); const shipsOfInterest = ships.filter( (ship) => mmsiOfInterest.includes(ship.MMSI) || shipNamesOfInterest.includes(ship.NAME) ); myCache.set('allData', shipsOfInterest, 70); res.send(data); return; } console.log('this is the data:', allData); res.send(allData); }); module.exports = router; 响应之下：

JSON

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

1）我尝试使用{"MMSI":225342000,"TIME":"2020-01-26 01:45:48 GMT","LONGITUDE":1.43912,"LATITUDE":38.91523,"COG":339.9,"SOG":0,"HEADING":297,"ROT":0,"NAVSTAT":0,"IMO":9822449,"NAME":"ILLETAS JET","CALLSIGN":"EAVX","TYPE":40,"A":4,"B":25,"C":4,"D":4,"DRAUGHT":0,"DEST":"IBIZA","ETA":"00-00 00:00"} 函数进行不同的组合，并尝试通过filter进行过滤，该过滤器对于每个容器都应该是唯一的，但最终还是得到具有相同{{ 1}}和不同的MMSI（尽管我对NAME进行了硬编码...我不明白）：

MMSI

我尝试用MMSI进行过滤后，但这也不起作用：

const shipsOfInterest = ships.filter(
                (ship) => mmsiOfInterest.includes(ship.MMSI)
            );

编辑2

NAME

错误以下：

我不知道如果以其他方式组织const shipsOfInterest = ships.filter( (ship) => shipNamesOfInterest.includes(ship.NAME) ); 函数是否可以获得更好的结果。我认为这可能是组织搜索的好方法，并且不了解它不起作用。 感谢您指出解决此问题的正确方向。

Answer 1

我猜您在使用速记分配时犯了错误。使用{}代替[]。

代替：

  const [ metaData, ships ] = data;

尝试：

  const { metaData, ships } = data;

Answer 2

在if语句的末尾，您执行res.send(data)，这基本上是您从API收到的数据。相反，您需要res.send(shipsOfInterest);另外，将mmsiOfInterest列表的格式从字符串更改为数字，因为您会从API接收数字。

Answer 3

据我所知，筛选后的列表包含具有唯一MMSI值的记录。因此，您需要做的是：

const uniqueMMSI = new Set();
const shipsOfInterest = ships.filter(
  (ship) => {
    if (set.has(ship.MMSI)) return false;
    set.add(ship.MMSI);
    return true;
  }
);

希望我能理解您的问题：）

Answer 4

当您的比较数组保存字符串时，看起来MMSI作为数字值输入。使用整数数组进行比较怎么样？

const mmsiOfInterest = [
    367029520,
    366909730, 
    367128570, 
    366744010, 
    // Other MMSI numbers .....
];