Reactjs 单击几下后，分页项返回未定义

我有一个从api返回数据并呈现数据的应用程序页面。数据限制为每页20条记录。我正在尝试添加分页，分页页面项似乎工作正常。如果单击页面，偏移量将根据请求的页面、重新获取和呈现的数据进行调整。 我现在已经在分页中添加了一个上一页和第一页项目，这在开始时似乎是有效的，但是在其他页面项目上单击几下之后，单击只会返回未定义的

主页的代码如下所示：

import React, { useState, useEffect, useMemo, useCallback } from "react"
import { Link } from "gatsby"
import { withAuthenticator, Loading } from 'aws-amplify-react'
import request from "../utilities/request"
import SEO from "../components/seo"
import Container from 'react-bootstrap/Container'
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'
import Table from 'react-bootstrap/Table'
import { currLocale, formatDate } from '../utilities/formatting'
import BasicPagination from '../components/pagination'



const ProductionOrders = (props) => {
  const [offset,setOffset] = useState(0)
  let records = 20
  const [orders, setOrders] = useState({})
  const [isLoading, setIsLoading] = useState(true)
  const [activePage, setActivePage] = useState(0)
  const [totalPages, setTotalPages] = useState()

  const handlePrev = (e) => {
    console.log(activePage)
    if (activePage <=1) {return}
    setOffset(offset-records)
  }
  
  const handleClick = (e) => {
    e.preventDefault()
    e.persist()
    console.log(e.target.attributes.value)
    const pageRequested = parseInt(e.target.attributes.value.value)
    console.log(`pageRequested${pageRequested}`)
    if (pageRequested =='prev') {
      setActivePage(activePage-1) 
      return }
    if (pageRequested === activePage) {return}
    setOffset((pageRequested-1)*records)
    console.log(e.target.attributes.value.value)
    console.log(offset)
  }

  function isEmpty(obj) {
    for (var key in obj) {
      if (obj.hasOwnProperty(key))
        return false;
    }
    return true;
  }
  useEffect(() => {
    async function fetchOrders() {
      const url = `${process.env.ERP_API_URL}/production-orders?offset=${offset}&records=${records}`
      const response = await request(url)
        .catch(err => console.log(err))
      setIsLoading(false)
      if (response === undefined) { return }
      console.log(response)
      const body = response.body
      if (!body) { return }
      setActivePage((offset/records)+1)
      setOrders(JSON.parse(body))
      

      
      console.log(orders)

    }

    fetchOrders()

  }, [offset])

 useEffect(() => {
  if (isEmpty(orders)) {return }
  setTotalPages(orders[0].recordCount)
 },[orders])

/* const totalPages = useMemo(() => {
  console.log(`TotalPages:${orders[0].recordCount}`)
  if (isEmpty(orders)) { return }
  return (orders[0].recordCount)
},[orders]) */

  return (
    <>
      <SEO title="Ürün Detay" />
      {((!isLoading) & (!isEmpty(orders))) ? (
        <Container>
          <h1>Üretim Emirleri</h1>
          <Row>
            <Col>
              <Table striped bordered hover size="sm">
                <thead>
                  <tr>
                    <th>Tarih</th>
                    <th>Fiş No</th>
                    <th>Ürün Kodu</th>
                    <th>Ürün Adı</th>
                    <th>Varyant Kodu</th>
                    <th>Varyant Adı</th>
                    <th>Planlanan Miktar</th>
                    <th>Üretilen Miktar</th>
                    <th>Durum</th>
                  </tr>
                </thead>
                <tbody>
                  {orders.map(order => (
                    <tr key={order.prodOrderId}>
                      <td>{formatDate(order.createdOn)}</td>
                      <td>{order.prodOrderNumber}</td>
                  <td><Link to={`/app/item-details/${order.product[0].id}`}>{order.product[0].code}</Link></td>
                  <td className="text-truncate" style={{maxWidth:'90px'}}>{order.product[0].name}</td>
                  {order.product[0].hasOwnProperty('variantCode') ? <td>{order.product[0].variantCode}</td> : <td></td>}
                  {order.product[0].hasOwnProperty('variantName') ? <td className="text-truncate" style={{maxWidth:'30px'}}>{order.product[0].variantName}</td> : <td></td>}
                  <td>{order.plannedQuantity}</td>
                  <td>{order.producedQuantity}</td>
                  <td>{order.prodOrderStatus}</td>
          
                    </tr>


                  ))}

                </tbody>


              </Table>
              <BasicPagination totalPages={Math.ceil(totalPages/records)} active={activePage} callBack={handleClick} prev={handlePrev}/>
            </Col>
          </Row>

        </Container>
      )
        : (!isLoading ? (<p>An error has occurred</p>) : (<p>Still Loading</p>))
      }
    </>
  )
}
export default withAuthenticator(ProductionOrders)

import React，{useState，useffect，usemo，useCallback}来自“React”
从“盖茨比”导入{Link}
从“aws amplify react”导入{withAuthenticator，正在加载}
从“./实用程序/请求”导入请求
从“./组件/SEO”导入SEO
从“react引导/容器”导入容器
从“反应引导/行”导入行
从“反应引导/Col”导入Col
从“react引导/表”导入表
从“../utilities/formatting”导入{currLocale，formatDate}
从“../components/pagination”导入基本分页
const ProductionOrders=（道具）=>{
const[offset，setOffset]=useState（0）
让记录=20
const[orders，setOrders]=useState（{}）
常量[isLoading，setIsLoading]=useState（真）
常量[activePage，setActivePage]=useState（0）
const[totalPages，setTotalPages]=useState（）
常数handlePrev=（e）=>{
console.log（activePage）
如果（活动页面{
e、 预防默认值（）
e、 坚持
console.log（e.target.attributes.value）
const pageRequested=parseInt（e.target.attributes.value.value）
log（`pageRequested${pageRequested}`）
如果（pageRequested=='prev'）{
setActivePage（activePage-1）
返回}
如果（pageRequested==activePage）{return}
设置偏移量（（第1页）*记录）
log（例如target.attributes.value.value）
console.log（偏移量）
}
函数isEmpty（obj）{
for（obj中的var键）{
if（对象hasOwnProperty（键））
返回false；
}
返回true；
}
useffect（（）=>{
异步函数fetchOrders（）{
const url=`${process.env.ERP\u API\u url}/生产订单？offset=${offset}&records=${records}`
const response=等待请求（url）
.catch（err=>console.log（err））
setIsLoading（错误）
if（response==未定义）{return}
console.log（响应）
const body=response.body
if（！body）{return}
setActivePage（（偏移/记录）+1）
setOrders（JSON.parse（body））
控制台日志（订单）
}
fetchOrders（）
}，[offset]）
useffect（（）=>{
if（isEmpty（orders））{return}
setTotalPages（订单[0]。记录计数）
}[订单]）
/*const totalPages=useMoom（（）=>{
log（`TotalPages:${orders[0].recordCount}`）
if（isEmpty（orders））{return}
退货（订单[0]。记录计数）
}[订单]）*/
返回(
{（！isLoading）&（！isEmpty（orders））(
Üretim Emirleri
塔里赫
菲诺
Ürün Kodu
Ürün Adı
瓦里安特科杜
瓦里安特酒店
普兰南米克塔尔酒店
Üretilen Miktar
硬粒
{orders.map（order=>(
{formatDate（order.createdOn）}
{order.prodOrderNumber}
{订单.产品[0].代码}
{order.product[0].name}
{order.product[0].hasOwnProperty（'variantCode'）？{order.product[0].variantCode}:}
{order.product[0].hasOwnProperty（'variantName'）？{order.product[0].variantName}:}
{order.plannedQuantity}
{订单.生产数量}
{order.prodOrderStatus}
))}
)
：（！isLoading？（发生了一个错误
）：（仍在加载
）
}
)
}
使用验证器导出默认值（ProductionOrders）

这是分页的代码：

import React from 'React'
import { Prev } from 'react-bootstrap/esm/PageItem'
import Pagination from 'react-bootstrap/Pagination'

const BasicPagination = (props) => {
    let items = []
    const pages = props.totalPages
    for (let i = 1; i <= props.totalPages; i++) {
        items.push(
            <Pagination.Item key={i} active={i === props.active} value={i} name="page" onClick={(e) => props.callBack(e)}>
                {i}
            </Pagination.Item>
        )
    }
    return (
        <>
            <Pagination>
                <Pagination.First value={1} onClick={(e) => props.callBack(e)} />
                <Pagination.Prev onClick={(e) => props.prev(e)} />
                {items}
                <Pagination.Last value={pages} onClick={(e) => props.callBack(e)} />
            </Pagination>
        </>
    )
}

export default BasicPagination

从“React”导入React
从'react bootstrap/esm/PageItem'导入{Prev}
从“反应引导/分页”导入分页
const BasicPagination=（道具）=>{
让项目=[]
const pages=props.totalPages
for（设i=1；i
{i}
)
}
返回(
props.callBack（e）}/>
props.prev（e）}/>
{items}
props.callBack（e）}/>
)
}
导出默认基本单位

为什么单击几下后会出现问题

有没有更好的方法来访问事件数据？而不是

e.target.attributes.value.value

---

传递事件对象onClick就是问题所在。我通过简单地传递所选的数字来解决问题，如下所示：

for (let i = 1; i <= props.totalPages; i++) {
        items.push(
            <Pagination.Item key={i} active={i === props.active} value={i} name="page" onClick={() => props.callBack(i)}>
                {i}
            </Pagination.Item>
        )
    }```

for（设i=1；i
{i}
)
}```

您是否能够在中复制此内容？