ReactJS

Question

我正在使用 AISHub APIs 构建船只可视化工具。在查询 APIs 后，我能够获得包含数千个容器的 json 文件，但我只过滤了我感兴趣的容器，并将它们注入网页上的 table . API 给出以下字段：[NAME, MMSI, LONGITUDE, LATITUDE, others...]。我用于过滤的最重要的参数是：NAME 和 MMSI（虽然可能有多个容器具有相同的 NAME，但不能有两个容器具有相同的 MMSI 编号，因为它是唯一的）。

我遇到的问题是filter函数似乎没有正确的行为。事实上，它并没有针对特定的 NAME and/or 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

因此，据我了解，过滤后的列表包含具有唯一 MMSI 值的记录。所以，你需要做的是：

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

希望我理解了你的问题:)

Answer 2

我猜你在使用 shorthand 赋值时弄错了。使用 {} 而不是 [].

而不是：

  const [ metaData, ships ] = data;

尝试：

  const { metaData, ships } = data;

Answer 3

看起来 MMSI 是以数值形式传入的，而您的比较数组保存的是字符串。使用整数数组进行比较如何？

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

Answer 4

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

接收数字

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

ReactJS - JavaScript: Filter function does not work properly

javascript

json

ais