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