如何在我的代码中避免 Array-callback-return 错误

Question

我想过滤一个项目列表并根据我过滤的术语显示项目。

我的物品清单

const [persons, setPersons] = useState([
        { name: 'Arton Senna', tel: '9900000000' },
        { name: 'Ada Lovelace', tel: '39-44-5323523' },
        { name: 'Dan Abramov', tel: '12-43-234345' },
        { name: 'Mary Poppendieck', tel: '39-23-6423122' }
    ])

我有一个作为搜索字段的输入元素

    <div>
        <label htmlFor='filter'>Filter phonebook with</label>
        <input type='text' name='filter_contacts' id='filter' onChange={filterText} />
    </div>

搜索字段有一个 onchange 处理程序

const filterText = (event) => {
        return setFilter(event.target.value)
    }

我正在使用 .map 辅助方法呈现列表项

    <ul>
       {persons.map(person => <li key={person.tel}>{person.name} {person.tel}</li>)}
    </ul>

我的状态对象如下

// persons
const [persons, setPersons] = useState([
        { name: 'Arton Senna', tel: '9900000000' },
        { name: 'Ada Lovelace', tel: '39-44-5323523' },
        { name: 'Dan Abramov', tel: '12-43-234345' },
        { name: 'Mary Poppendieck', tel: '39-23-6423122' }
    ])
// serachField
    const [filter, setFilter] = useState('')

我希望能够根据我在 <input/> 元素中输入的内容来呈现我的列表以进行搜索，所以我做了以下操作

     <ul>
       {persons
           .filter(person => {
               if (filter === '') {
                  return person
               } else if (person.name.toLocaleLowerCase().includes(filter.toLowerCase())) {
                  return person
               }})
            .map(person => <li key={person.tel}>{person.name} {person.tel}</li>)}
     </ul>

执行此操作后，eslint 给我以下警告消息
Array.prototype.filter() expects a value to be returned at the end of arrow function.eslintarray-callback-return

**请帮助我理解这个问题，我该如何......**

• 在此处使用另一种方法，通过过滤和呈现我的列表来做我想做的事情
• 我这样做的方式有什么问题？（代码仍然可以正常工作，但是那个警告消息让我很烦）
• 什么是简洁的方法来完成相同的任务

@Quentin我做了以下重构

                    {
                        filter
                            // truthy 
                            ? persons.filter(person => person.name.toLowerCase().includes(filter.toLowerCase())).map(person => <li key={person.tel}>{person.name} {person.tel}</li>)
                            // falsy 
                            : persons.map(person => <li key={person.tel}>{person.name} {person.tel}</li>)
                    }

Answer 1

我的做法有什么问题？

ESLint 希望你明确地返回一些东西：总是。

如果代码到达函数的末尾，它隐式返回undefined。 ESlint 希望你是明确的。

person => {
  if (filter === '') {
    return person
  } else if (person.name.toLocaleLowerCase().includes(filter.toLowerCase())) {
    return person
  }
  return false; // Explicit
}

完成相同任务的简洁方法是什么

person => (filter === '' || person.name.toLocaleLowerCase().includes(filter.toLowerCase()).toLowerCase()) 

……应该可以解决问题。