javascript - 当被过滤的数组包含 JSON 数据时，为什么我会收到 'cannot read property ' filter' of undefined' ？

Question

以下代码

const endpoint = 'https://raw.githubusercontent.com/Hipo/university-domains-list/master/world_universities_and_domains.json';
const universities = [];

fetch(endpoint)
    .then(results => results.json())

    .then(data => universities.push(...data));

console.log(universities);

function findMatches(wordToMatch, universities) {
    return universities.filter(uni => {
        const regex = new RegExp(wordToMatch, 'gi');
        return uni.name.match(regex)
    })
}

export default findMatches;

返回以下错误

'Uncaught TypeError: Cannot read property 'filter' of undefined'

我可以使用 console.log(universities) 记录数据。那么为什么我不能过滤它呢？仅供引用，数据是对象数组。非常感谢任何帮助。谢谢。

Answer 1

您需要在 findMatches 函数中删除 universities 作为参数，因为它会覆盖本地 universities 变量的值:

function findMatches(wordToMatch) {
    return universities.filter(uni => {
        const regex = new RegExp(wordToMatch, 'gi');
        return uni.name.match(regex)
    })
}

然后您可以继续使用 findMatches 函数，如下所示:

findMatches("hi") // returns a filtered array

编辑:

您的代码中有竞争条件，其中可能会调用 findMatches 在您的 fetch 完成之前。要解决此问题，findMatches 应返回如下 promise :

const endpoint = 'https://raw.githubusercontent.com/Hipo/university-domains-list/master/world_universities_and_domains.json';
const universities = [];

const promise = fetch(endpoint)
    .then(results => results.json())

    .then(data => universities.push(...data));

console.log(universities);

function findMatches(wordToMatch) {
    return promise.then(() => universities.filter(uni => {
        const regex = new RegExp(wordToMatch, 'gi');
        return uni.name.match(regex)
    }));
}

findMatches("hi").then(arr => console.log(arr));

如果您绝对确定 findMatches 始终会在 fetch 完成后被调用，则可以采用第一个解决方案。否则，强烈建议您使用第二种使用 promise 的解决方案。