React使用filter实现搜索过滤器报array-callback-return错误如何解决？

Array.prototype.filter() 的回调函数要求所有逻辑分支都必须有返回值，你当前的代码只处理了search为空和搜索关键词匹配两种情况，当关键词不匹配时，回调函数没有任何返回值，所以触发了ESLint的array-callback-return规则报错。
另外补充：filter的回调只需返回布尔值即可，你当前代码里返回board对象是利用了对象转布尔值为true的隐式特性，不符合最佳实践，建议直接返回明确的true/false。

写法1：补全所有分支返回逻辑 #

const boards = this.state.boards.filter((board)=>{
    if(this.state.search == null) {
        return true;
    } else if(board.title.toLowerCase().includes(this.state.search.toLowerCase()) || board.content.toLowerCase().includes(this.state.search.toLowerCase())){
        return true;
    }
    // 补全不匹配场景的返回值
    return false;
}).map(board=>{
    return(
        <tr key = {board.idx}>
        <td> {board.idx} </td>
        <td><button  className="btn btn-link" onClick = {() => this.BoardDetail(board.idx)}> {board.title}</button></td>
        <td> {board.insertTime} </td>
        <td> {board.updateTime} </td>
        <td> {board.viewCnt} </td>
    </tr>
    )
})

写法2：合并判断逻辑，避免分支遗漏 #

直接把所有判断逻辑合并成一个布尔表达式返回，代码更简洁：

const boards = this.state.boards.filter((board)=>{
    return this.state.search == null 
        || board.title.toLowerCase().includes(this.state.search.toLowerCase()) 
        || board.content.toLowerCase().includes(this.state.search.toLowerCase())
}).map(board=>{
    return(
        <tr key = {board.idx}>
        <td> {board.idx} </td>
        <td><button  className="btn btn-link" onClick = {() => this.BoardDetail(board.idx)}> {board.title}</button></td>
        <td> {board.insertTime} </td>
        <td> {board.updateTime} </td>
        <td> {board.viewCnt} </td>
    </tr>
    )
})

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