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

Question

我正在 React 中制作搜索组件，但无法解决此错误？我认为它可能只是语法，但我看不到它。

src/components/SearchResults.js 第 38:22 行：Array.prototype.filter() 期望在箭头函数 array-callback-return

的末尾编辑一个值 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>
        );
      });
  };

Answer 1

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

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>
        );
      });
  };

Answer 2

您使用的filter方法有误。它接受一个函数作为参数，该函数应该总是 return boolean.

More info

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

这是您的代码，其中包含一些注释，可以向您展示正在发生的事情：

.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;
})

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

Array.prototype.filter() expects a value to be returned at the end of arrow function, React

arrays

reactjs

return-value

arrow-functions

array.prototype.map