尝试动态呈现表时出错

Question

我的目标是在我的应用程序中构建一个分页。我想测试是否使用切片和映射来渲染具有10行的表。问题是我无法呈现我的表格。控制台中没有出现任何错误。我是按照下面的代码做的：

Obs：日期返回是一个对象数组。

import { Container } from "./styles"
import ReactPaginate from "react-paginate"
import { useState } from "react"
import data from "../../data/data.json"
export const BillingList = () => {
const [stores, setStores] = useState(data.stores.slice(0, 50))
const [pageNumber, setPageNumber] = useState(0)
const storesPerPage = 10
const pagesVisited = pageNumber * storesPerPage
return (
<Container>
<table>
<thead>
<tr>
<th>Loja</th>
<th>Faturamento</th>
</tr>
</thead>
<tbody>
{stores.slice(pagesVisited, pagesVisited + storesPerPage)
.map((store) => {
<tr>
<td>{store.name}</td>
<td>{store.revenue}</td>
</tr>
})}
</tbody>
</table>
</Container>
)
}

Answer 1

表体缺少"返回"；在使用map时(每当您使用带map功能的大括号时，内容不会自动返回，您必须手动返回(；请在地图功能中添加退货

let tempArray=[1,2,3,4,5]
//Issue in above mentioned problem
let res=tempArray.map((element)=>{ element})
console.log("Map map does not return anything",res)
//SOLUTIONS
//Solution 1
res=tempArray.map((element)=>element)
console.log("Map funtion without {}",res)
//Solution 2
res=tempArray.map((element)=>{return element})
console.log("Map funtion with {} now we have to add return",res)

Answer 2

问题出在.map()函数中。您不需要执行｛｝和((。

这样做：

<tbody>
{stores.slice(pagesVisited, pagesVisited + storesPerPage)
.map((store) => (
<tr>
<td>{store.name}</td>
<td>{store.revenue}</td>
</tr>
))}
</tbody>

原因：

() => {return 'someValue';} 

等于

() => ('someValue')

你可以接近他们中的任何一个。添加回车或更改括号。