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