JavaScript 原型：filter->if(which function?)->map

Question

我正在研究反应。 我正在努力使用 JavaScript 原型。 我想做的是下面。

1. 如果输入了searchWord ，则将数组 ( props.rows ) 过滤为包含该单词的数组。
2. 如果元素的数量超过rowsPerPage ，则仅显示rowsPerPage 。

但是，我输入的内容与此相反。 切片rowsPerPage中的元素，然后过滤包含searchWord的元素。

我不知道需要哪个 function。 请帮我。 先感谢您。

（如果可以只使用原型编写代码，我想做。）

// reversed sequence
{(rowsPerPage > 0
? props.rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
: props.rows
)
.filter((row) =>
!searchWord.length || row.name
  .toString()
  .toLowerCase()
  .includes(searchWord.toString().toLowerCase()) 
)
.map((item) => (
  <TableRow key={item.id} hover>
    <TableCell component="th" scope="row">
      {item.id}
    </TableCell>
    <TableCell>
      {item.name}
    </TableCell>
  </TableRow>
))}

// what I tried
{props.rows
.filter((row) =>
  !searchWord.length || row.name
    .toString()
    .toLowerCase()
    .includes(searchWord.toString().toLowerCase()) 
)
?????.((?????) => (
  rowsPerPage > 0
  ? ?????.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
  : ?????
))
.map((item) => (
  <TableRow key={item.id} hover>
    <TableCell component="th" scope="row">
      {item.id}
    </TableCell>
    <TableCell>
      {item.name}
    </TableCell>
  </TableRow>
))}

Answer 1

尝试将其移至变量

let filteredRows = props.rows
  .filter((row) =>
    !searchWord.length || row.name
      .toString()
      .toLowerCase()
      .includes(searchWord.toString().toLowerCase()) 
  );

if (rowsPerPage > 0) {
  filteredRows = filteredRows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
}


return filteredRows.map(item => (
  <TableRow key={item.id} hover>
    <TableCell component="th" scope="row">
      {item.id}
    </TableCell>
    <TableCell>
      {item.name}
    </TableCell>
  </TableRow>
))

或不推荐的方法

{props.rows
.filter((row) =>
  !searchWord.length || row.name
    .toString()
    .toLowerCase()
    .includes(searchWord.toString().toLowerCase()) 
)
.slice(...(rowsPerPage > 0 ? [page * rowsPerPage, page * rowsPerPage + rowsPerPage] : []))
.map((item) => (
  <TableRow key={item.id} hover>
    <TableCell component="th" scope="row">
      {item.id}
    </TableCell>
    <TableCell>
      {item.name}
    </TableCell>
  </TableRow>
))}