reactjs filter()期望在arrow函数的末尾返回一个值

6jygbczu  于 2023-05-22  发布在  React
关注(0)|答案(5)|浏览(199)

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

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:filter()期望在箭头函数array-callback-return的末尾返回一个值

monwx1rj

monwx1rj1#

filter期望为您正在筛选的数组中的每个项返回一个布尔值。如果返回true,则将该项添加到结果数组中。
如果你想改变数组而不是过滤它,可以使用另一种方法,比如map

9rbhqvlz

9rbhqvlz2#

首先,您可以使用filter来获取一个仅包含所需标题的数组(减去noheader)。然后使用map迭代该数组中的所有头并呈现它们。

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

bnlyeluc3#

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

olmpazwi

olmpazwi4#

首先筛选此数组。然后可以使用.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>
  );
}
epggiuax

epggiuax5#

我遇到了同样的错误,并通过返回null解决了它。(在我的例子中,无论如何都不会返回null):

{showLocked && LockedAchievements && LockedAchievements.filter((val) => {
    if (searchTerm === "") {
        return val;
    } else if (val.props.title.toLowerCase().includes(searchTerm.toLowerCase())) {
        return val
    } else {
        return null;
    }
})}

相关问题