如何修复“Array.prototype.filter() 期望在箭头函数结束时返回一个值”答案

【问题标题】：How to fix "Array.prototype.filter() expects a value to be returned at the end of arrow function"如何修复“Array.prototype.filter() 期望在箭头函数结束时返回一个值”
【发布时间】：2021-04-07 11:57:50
【问题描述】：

我在理解为什么我的这段 React 代码收到警告时遇到了一些问题

Array.prototype.filter() 期望在箭头函数结束时返回一个值

但它似乎有效。

 {customers
    .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
    .filter((customer) => {
      if (searchTerm === "") {
        return customer;
      } else if (
        customer.cust_main_name.toLowerCase().includes(searchTerm.toLowerCase())
      ) {
        return customer;
      }
    })

我需要进行哪些更改才能避免出现此警告？

【问题讨论】：

您有 if/else if 没有最终的 else。这意味着如果两个条件都不匹配，则该函数根本不会有返回值。
这能回答你的问题吗？ How do I fix "Expected to return a value at the end of arrow function" warning?
这能回答你的问题吗？ Expected to return a value at the end of arrow function array-callback-return on filter function

标签： reactjs

【解决方案1】：

Array.prototype.filter 期望从回调函数中返回一个值，暗示是保留还是拒绝当前 itemm 值

但是，在您的回调函数中，您有 if-else-if 块，您可以在其中返回值，但 if 或 else-if 条件都不匹配，您不会返回错误所指的任何内容

如果您的 if 或 else-if 条件都不匹配，您可以返回 false

customers
    .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
    .filter((customer) => {
      if (searchTerm === "") {
        return customer;
      } else if (
        customer.cust_main_name.toLowerCase().includes(searchTerm.toLowerCase())
      ) {
        return customer;
      }
      return false;
    })

【讨论】：

【解决方案2】：

更紧凑的版本：

{customers
    .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
    .filter((customer) => !searchTerm || customer.cust_main_name.toLowerCase().includes(searchTerm.toLowerCase()) 
    })

【讨论】：