如何避免代码中的 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

What is the problem with the way I'm doing it?

ESLint 希望您明确地 return 某事：总是。

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

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

What is a succinct way to do the same task

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

…应该可以解决问题。

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

How can I avoid Array-callback-return error in my code

javascript

callback

higher-order-functions

reactjs

eslint