reactjs - 我应该单击两次以获取我的页面 [反应打字稿分页]

Question

我正在使用 asp.net core 和 react typescript，我想paginatedEntity从我的 API 中使用并使用它pagination在react. 请问有什么线索吗？

下面是代码：

import { Card, CardActionArea } from "@material-ui/core";
import { observer } from "mobx-react-lite";
import { useEffect, useState } from "react";
import { Grid, Item } from "semantic-ui-react";
import LoadingComponent from "../../app/layout/LoadingComponent";
import { PagingParams } from "../../app/stores/pagination";
import { useStore } from "../../app/stores/store";
import { makeStyles, createStyles } from '@material-ui/core/styles';
import Pagination from '@material-ui/lab/Pagination';
import React from "react";
const useStyles = makeStyles((theme) =>
  createStyles({
    root: {
      '& > * + *': {
        marginTop: theme.spacing(2),
      },
    },
  }),
);

export default observer(function AllProduct() {
  const { productStore } = useStore();
  const [, setLoadingPage] = useState(false);
  const classes = useStyles();
  const [page, setPage] = React.useState(1);
  const handleChange = (_event: React.ChangeEvent<unknown>, value: number) => {
    setPage(value);
  };
  function handleGetPage() {
    setLoadingPage(true);
    productStore.setPagingParams(new PagingParams(page));
    productStore.loadProducts().then(() => setLoadingPage(false));
  }
  useEffect(() => {
    productStore.loadProducts();
  }, [productStore])
  if (productStore.loadingInitial) return <LoadingComponent />
  return (
    <Grid style={{ marginTop: '7em' }}>
      <Grid.Column width='5' id='FilterHeightSide'>
      </Grid.Column>
      <Grid.Column width='10'>
        <div className={classes.root}>
          {
            productStore.products.map((product: any) =>
              <Grid.Column key={product.id} width='10'>
                <Card>
                  <CardActionArea >
                    <Item.Group>
                      <Item>
                        <Item.Image id='MainPhotoItems' style={{ marginLeft: '1em', marginTop: '1em' }} src={product.mainPhotoUrl} />
                        <Item.Content>
                          <Item.Header style={{ marginTop: '0.5em' }}>{product.productName}</Item.Header>
                          <Item.Meta style={{ marginTop: '1.5em' }}>
                            <span id="TextPrice" className='price'>${product.priceIncTax}</span>
                            <span className='stay'></span>
                          </Item.Meta>
                          <Item.Description><img src={product.brandPhotoUrl} alt="brand"
                            id="LogoBrandItem" /></Item.Description>
                        </Item.Content>
                      </Item>
                    </Item.Group>
                  </CardActionArea>
                </Card>
              </Grid.Column>
            )
          }
          <Pagination count={productStore.totalPages} onChange={handleChange} onClick=
            {handleGetPage} page={page} />
        </div>
      </Grid.Column>
    </Grid>
  )
})

我正在使用 asp.net core 和 react typescript，我想paginatedEntity从我的 API 中使用并使用它pagination在react. 请问有什么线索吗？

标签： reactjstypescript

Answer 1

好吧，我终于找到了解决方案：

import {  Card, CardActionArea } from "@material-ui/core";
import { observer } from "mobx-react-lite";
import { useEffect, useState } from "react";
import {  Grid, Item } from "semantic-ui-react";
import LoadingComponent from "../../app/layout/LoadingComponent";
import { PagingParams } from "../../app/stores/pagination";
import { useStore } from "../../app/stores/store";
import { makeStyles, createStyles } from '@material-ui/core/styles';

import Pagination from '@material-ui/lab/Pagination';
import React from "react";

const useStyles = makeStyles((theme) =>
  createStyles({
    root: {
      '& > * + *': {
        marginTop: theme.spacing(2),
      },
    },
  }),
);

export default observer( function AllProduct(){
    const {productStore }=useStore();
    
    const [, setLoadingPage] = useState(false);
    const classes = useStyles();
    const  [page, setPage] = React.useState(1);
    const handleChange = (_event: React.ChangeEvent<unknown>, value: number) => {
      setLoadingPage(true);
      productStore.setPagingParams(new PagingParams(productStore.pagingParams.pageNumber=value));
      
      productStore.loadProducts().then(()=>setPage(value)).then(() => setLoadingPage(false));
      
    };
  
   
  useEffect(()=> {
        productStore.loadProducts();
        
      },[productStore])
    if(productStore.loadingInitial ) return <LoadingComponent/>
    return(
        
        <Grid style={{marginTop:'8em'}}>
            <Grid.Column width='5' id='FilterHeightSide'>

            </Grid.Column>
            <Grid.Column width='10'>
            <div className={classes.root}>
            {
                productStore.products.map((product:any)=>
                <Grid.Column key={product.id} width='10'>
                <Card>    
                <CardActionArea >    
                <Item.Group>
                <Item>
                <Item.Image id='MainPhotoItems' style={{marginLeft:'1em' , marginTop:'1em'}} src={product.mainPhotoUrl} />

                <Item.Content>
                    <Item.Header style={{marginTop:'0.5em'}}>{product.productName}</Item.Header>
                    <Item.Meta style={{marginTop:'1.5em'}}>
                    <span id="TextPrice" className='price'>${product.priceIncTax}</span>
                    <span className='stay'></span>
                    </Item.Meta>
                    <Item.Description><img src={product.brandPhotoUrl} alt="brand" id="LogoBrandItem" /></Item.Description>
                </Item.Content>
                </Item>
                </Item.Group>
                </CardActionArea>
                </Card>
                
                </Grid.Column>
                
                )
            }
            
        
            <Pagination count={productStore.totalPages} page={page} onChange={handleChange}   />
            </div>
        </Grid.Column>   
        </Grid>
    )
})

我希望这对其他人有帮助:)