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

Question

我试图理解为什么这个错误出现在我的表格中，我在这里找不到其他问题的相似之处。

function Table({ data }) {
  return (
    <table className="main-table">
      <thead>
        <tr>
          {data["columns"].filter((header) => {
            if (!header.includes("noheader")) {
              return <th key={header}>{header}</th>;
            } else {
              return false;
            }
          })}
        </tr>
      </thead>
    </table>
  );
}

引发错误第 15:53 行：Array.prototype.filter() 期望在箭头函数 array-callback-return 的末尾返回一个值

Answer 1

filter期望为您正在过滤的数组中的每个项目返回一个布尔值。 如果返回 true，则将项目添加到结果数组中。

如果要更改数组而不是对其进行过滤，请使用另一种方法，例如map

Answer 2

Array.filter希望返回 true 或 false 以确定新数组是否包含它正在检查的元素。 如果您想以某种方式改变数组，您可能需要考虑Array.reduce() ，因为它可以过滤和改变返回的数组（或者实际上也可以做许多其他事情）。

Answer 3

先过滤这个数组。 然后你可以使用 .map()

 function Table({ data }) {
  return (
    <table className="main-table">
      <thead>
        <tr>
          {data["columns"].filter((e => !e.includes("noheader")).map(header => <th key={header}>{header}</th>))}
        </tr>
      </thead>
    </table>
  );
}

Answer 4

首先，您可以使用filter来获取一个仅包含您想要的标题的数组（减去noheader ）。 然后使用map遍历该数组中的所有标题并呈现它们。

data["columns"].filter(header => (!(header.includes("noheader")))).map(header =>
        return <th key = { header} > { header } < /th>;)