javascript - 当要过滤的数组包含JSON数据时，为什么会得到“无法读取未定义的属性”过滤器”？

以下代码

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;

返回下面的错误


  “未捕获的TypeError：无法读取未定义的属性”过滤器”


我可以使用console.log（universities）记录数据。那我为什么不能过滤呢？仅供参考，数据是对象数组。任何帮助都受到赞赏。谢谢。

最佳答案

您需要在universities函数中删除findMatches作为参数，因为它会覆盖局部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应该返回如下承诺：

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的解决方案。