ReactJS - JavaScript：過濾器功能無法正常工作

Question

我正在使用AISHub API構建一個船可視化器。 在查詢 API 后，我能夠獲得包含數千艘船只的 json 文件，但我只過濾了我感興趣的船只，並將它們注入網頁上的表格中。 API 提供以下字段： [NAME, MMSI, LONGITUDE, LATITUDE, others...] 。 我用於過濾的最重要參數是： NAME和MMSI （雖然可能有多艘船只具有相同的NAME ，但不能有兩艘船只具有相同的MMSI編號，因為它是唯一的）。

我的問題是filter功能似乎沒有正確的行為。 事實上，它不會針對特定的NAME和/或MMSI唯一過濾，我最終會擁有多個具有相同NAME和不同MMSI 。 還有應該出現的船只，它沒有出現，盡管我為該特定船只硬編碼了NAME和MMSI 。 這是無法解釋的，因為我對這些數字進行了硬編碼以進行專門過濾。

在我用於過濾搜索的代碼下方：

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;

同樣在來自 API 的典型JSON響應下方：

{"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"}

到目前為止我做了什么：

1）我嘗試了與filter功能的不同組合，並嘗試通過MMSI進行過濾，這對於每個船只來說應該是唯一的，但最終我仍然得到具有相同NAME和不同MMSI （盡管我對MMSI硬編碼。 ..我不明白）：

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

在我嘗試按NAME過濾后，但這也不起作用：

const shipsOfInterest = ships.filter(
                (ship) => shipNamesOfInterest.includes(ship.NAME)
            );

編輯 2

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=KEY&format=1&output=json&compress=0&latmin=11.42&latmax=58.20&lonmin=-134.09&lonmax=-52.62'
        );

        // console.log(data);
        const { metaData, ships } = data;
        const set = new Set();
        const shipsOfInterest = ships.filter((ship) => {
            if (set.has(ship.MMSI)) return false;
            set.add(ship.MMSI);
            return true;
        });
        myCache.set('allData', shipsOfInterest, 70);
        res.send(data);
        return;
    }

    console.log('this is the data:', allData);
    res.send(allData);
});

module.exports = router;

在錯誤下方：

我不知道如果以不同的方式組織filter功能是否可以獲得更好的結果。 我認為這可能是一種很好的組織搜索方式，但不明白它不起作用的地方。 感謝您指出解決此問題的正確方向。

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