Vue3响应式数组使用find返回undefined，如何正确用find/match/filter？

你的代码问题出在箭头函数的语法上：在find的回调函数里用了大括号包裹代码块，但没有显式返回判断结果，导致find始终返回undefined。

错误原因 #

箭头函数如果用大括号包裹逻辑，必须手动添加return语句才能返回值。你当前的回调没有返回person.id == id的判断结果，find无法识别匹配条件，自然找不到对应的数组项。

修正后的代码 #

可以用两种方式修复：

1. 去掉大括号，利用箭头函数的隐式返回特性：

function selectPerson(id) {
  selectedPerson.value = people.value.find(person => person.id == id)
}

2. 保留大括号，添加显式return语句：

function selectPerson(id) {
  selectedPerson.value = people.value.find((person) => {
    return person.id == id
  })
}

补充说明 #

你对.value的理解是正确的：people.value确实会返回ref包裹的原始数组，完全可以正常使用find、filter等数组原生方法，不需要自行编写循环。只要修正箭头函数的返回问题，就能正确找到匹配的person对象并赋值给selectedPerson.value。

内容的提问来源于stack exchange，提问作者JaneDoe