无法读取未定义的属性（读取“匹配”）答案

【问题标题】：Cannot read properties of undefined (reading 'matches')无法读取未定义的属性（读取“匹配”）
【发布时间】：2022-01-15 01:51:48
【问题描述】：

我正在尝试过滤一个对象数组（在我的例子中是专辑），但是我收到了这个错误并且我尝试的所有方法都不起作用。

我的搜索栏：

<input type="search" placeholder={" "} onChange={e => onChangeHandler(e.target.value)} value={text}/>

我的 onChangeHandler

const onChangeHandler =(text) => {
        let matches = []
        if (text.length > 0){
            matches = albums.filter(album => {
                const regex = new RegExp(`${text}`, "gi")
                return (album.artist.matches(regex));
            });
        }
        console.log('matches', matches)
        setSuggestions(matches)
        setText(text)
    }

当我尝试时，它可以工作并且我会在控制台中获得匹配项，但前提是我正确键入所有内容并且区分大小写。这不是目标。

return (album.artist === text);

【问题讨论】：

你的相册是什么样子的？
这与正则表达式无关，album.artist 似乎是undefined。
你能告诉我们你的相册数组是什么样的吗？如果它返回“无法读取未定义的属性匹配”，则表示专辑.艺术家未定义
正如大家所说，您很可能缺少“专辑”的“艺术家”。您可以使用 return (album?.artist?.matches?.(regex)); 之类的可选链接来解决这个问题，这样您的过滤器就会过滤掉任何没有艺术家信息的专辑。
@OrionCygnus 这个工作。谢谢！

标签： javascript reactjs filter

【解决方案1】：

您可以为此使用包含字符串的方法。因此，对于您的示例，如下所示：

matches = albums.filter(album => album.artist.toLowerCase().includes(text.toLowerCase()));

如果您希望搜索区分大小写，则应删除 toLowerCase 方法。

【讨论】：

【解决方案2】：

您的代码中可能存在 2 个问题。首先，它似乎找不到album.artist，因此请确保您的对象看起来正确。

其次，matches() 不是字符串上的函数，您的意思可能是 match()

let albums = [{
  artist: "Me"
}, {
  artist: "You"
}]

const onChangeHandler = (text) => {
  let matches = []
  if (text.length > 0) {
    matches = albums.filter(album => {
      const regex = new RegExp(`${text}`, "gi")
      return (album.artist.match(regex)); // Here matches => match
    });
  }
  console.log('matches', matches)
  //setSuggestions(matches)
  //setText(text)
}
onChangeHandler("mE")
onChangeHandler("me")
onChangeHandler("yo")

【讨论】：

是的，以前是匹配的。我将其更改为匹配只是为了尝试一些东西。仍然只有匹配的错误。但 Orion Cygnus 的上述评论奏效了。
对于更多问题，请尝试包含类似您的相册数组的内容，因为未定义告诉我们您调用该函数的内容有问题，因此每个人都在询问您的相册 xD