Array.prototype.filter() 期望在箭头函数 React 的末尾返回一个值答案

【问题标题】：Array.prototype.filter() expects a value to be returned at the end of arrow function, ReactArray.prototype.filter() 期望在箭头函数 React 的末尾返回一个值
【发布时间】：2021-11-09 23:35:51
【问题描述】：

我正在做一个搜索组件反应并且无法弄清楚这个错误？我认为它可能只是语法，但我看不到。

src/components/SearchResults.js 第 38:22 行：Array.prototype.filter() 期望在箭头函数 array-callback-return 的末尾返回一个值

 const filterData = () => {
    return data
      .filter((item) => {
        if (searchTerm === "") {
        } else {
          let searchText = item.title;
          let searchBlock = item.content;
          if (searchText.toLowerCase().includes(searchTerm.toLowerCase())) {
            return item;
          } else {
            let test = null;
            searchBlock.forEach((obj) => {
              if (obj.text && 
                obj.text.toLowerCase().includes(searchTerm.toLowerCase())) {
                test = true;
                return test;
              }
            });
            if (test) {
              return item;
            }
          }
        }
      })
      .map((item) => {
        return (
          <div key={item.index}>
            <h3 style={{ padding: "0.25rem" }}>{splitResult(item.title)}</h3>
            {item.content.map((block, i) => (
              <div key={i}>
                {block.text && <div>{splitResult(block.text)}</div>}
                {block.items && (
                  <div>
                    {block.items.map((l, i) => (
                      <div style={{ padding: "0.25rem" }} key={i}>
                        {splitResult(l)}
                      </div>
                    ))}
                  </div>
                )}
              </div>
            ))}
            <div
              className={styles.searchLink}
              onClick={() => {
                context.setCurrentSlide(item.index);
                setSearchTerm("");
                hideResults();
                clearInput();
                toggleSearch();
              }}
            >
              Go To This Slide
            </div>
            <hr />
          </div>
        );
      });
  };

【问题讨论】：

尝试以各种可能的方式获得回报。比如这里if (searchTerm === "") { } else {在如果没有返回，那么尝试添加在那里

标签： arrays reactjs return-value arrow-functions array.prototype.map

【解决方案1】：

.filter() 中的第一个条件缺少返回语句。

const filterData = () => {
    return data
      .filter((item) => {
        if (searchTerm === "") 
        {
            // RETURN VALUE HERE
            return false;
        } 
        else 
        {
          let searchText = item.title;
          let searchBlock = item.content;
          if (searchText.toLowerCase().includes(searchTerm.toLowerCase())) 
          {
            return item;
          } 
          else 
          {
            let test = null;
            searchBlock.forEach((obj) => {
              if (obj.text && obj.text.toLowerCase().includes(searchTerm.toLowerCase())) 
              {
                test = true;
                return test;
              }
            });
            if (test) 
            {
              return item;
            }
          }
        }
      })
      .map((item) => {
        return (
          <div key={item.index}>
            <h3 style={{ padding: "0.25rem" }}>{splitResult(item.title)}</h3>
            {item.content.map((block, i) => (
              <div key={i}>
                {block.text && <div>{splitResult(block.text)}</div>}
                {block.items && (
                  <div>
                    {block.items.map((l, i) => (
                      <div style={{ padding: "0.25rem" }} key={i}>
                        {splitResult(l)}
                      </div>
                    ))}
                  </div>
                )}
              </div>
            ))}
            <div
              className={styles.searchLink}
              onClick={() => {
                context.setCurrentSlide(item.index);
                setSearchTerm("");
                hideResults();
                clearInput();
                toggleSearch();
              }}
            >
              Go To This Slide
            </div>
            <hr />
          </div>
        );
      });
  };

【讨论】：

@lache 随时！

【解决方案2】：

您使用的filter 方法错误。它接受一个函数作为参数，并且该函数应始终返回布尔值。

More info

您的代码在某些情况下返回对象（真实），而在其他情况下返回未定义。

这是您的代码，其中包含一些 cmets，可向您展示发生了什么：

.filter((item) => {
    if (searchTerm === "") {
      // returning undefined
    } else {
      let searchText = item.title;
      let searchBlock = item.content;
      if (searchText.toLowerCase().includes(searchTerm.toLowerCase())) {
        return item; // would be better to do: return true;
      } else {
        let test = null;
        searchBlock.forEach((obj) => {
          if (obj.text && 
            obj.text.toLowerCase().includes(searchTerm.toLowerCase())) {
            test = true; 
            return test; // unnecessary 
          } 
        });
        if (test) {
          return item; // would be better to return true;
        }
        // returning undefined;
      }
    }
  })

这是另一种方法（未测试）：

 .filter((item) => {
    if (searchTerm === "") return false; // searchTerm is in scope?

    let searchText = item.title;
    let searchBlock = item.content;
    if (searchText.toLowerCase().includes(searchTerm.toLowerCase())) {
      return true;
    } 

    let test = false;
    searchBlock.forEach((obj) => {
      if (obj.text && 
        obj.text.toLowerCase().includes(searchTerm.toLowerCase())) {
        test = true;
      }
    });

    return test;
})

【讨论】：

这非常有效，谢谢你的两个答案帮助我也很感激编写代码的时间