分页在 React 前端中不起作用

Question

分页在 React Frontend 中不起作用。我正在创建一个电子商务应用程序，并希望在我的网站上对我的产品进行分页。这是获取分页产品的代码。

const getProducts = asyncHandler(async (req, res, next) => {
  const pageSize = 3;
  const page = Number(req.query.pageNumber) || 1;
  const keyword = req.query.keyword
    ? {
        name: {
          $regex: req.query.keyword,
          $options: 'i',
        },
      }
    : {};
  const count = await Product.countDocuments({ ...keyword });
  const products = await Product.find({ ...keyword })
    .limit(pageSize)
    .skip(pageSize * (page - 1))
    .sort({ _id: -1 });
  res.json({ products, page, pages: Math.ceil(count / pageSize) });
});

我正在使用 Redux 进行状态管理。这是Reducer的代码

// PRODUCT LIST
export const productListReducer = (state = { products: [] }, action) => {
  switch (action.type) {
    case PRODUCT_LIST_REQUEST:
      return { loading: true, products: [] };
    case PRODUCT_LIST_SUCCESS:
      return {
        loading: false,
        pages: action.payload.pages,
        page: action.payload.page,
        products: action.payload.products,
      };
    case PRODUCT_LIST_FAIL:
      return { loading: false, error: action.payload };
    default:
      return state;
  }
};

这是Action代码

// PRODUCT LIST
export const listProduct =
  (keyword = ' ', pageNumber = ' ') =>
  async (dispatch) => {
    try {
      dispatch({ type: PRODUCT_LIST_REQUEST });
      const { data } = await axios.get(
        `/api/products?keyword=${keyword}&pageNumber=${pageNumber}`
      );
      dispatch({ type: PRODUCT_LIST_SUCCESS, payload: data });
    } catch (error) {
      dispatch({
        type: PRODUCT_LIST_FAIL,
        payload:
          error.response && error.response.data.error
            ? error.response.data.error
            : error.message,
      });
    }
  };

这是分页组件和其他一些组件

import React, { useEffect } from 'react';
import { Link } from 'react-router-dom';
import Rating from './Rating';
import Pagination from './pagination';
import { useDispatch, useSelector } from 'react-redux';
import { listProduct } from '../../Redux/Actions/ProductActions';
import Loading from '../LoadingError/Loading';
import Message from '../LoadingError/Error';

const ShopSection = (props) => {
  const { keyword, pagenumber } = props;
  const dispatch = useDispatch();

  const productList = useSelector((state) => state.productList);
  const { loading, error, products, page, pages } = productList;

  useEffect(() => {
    dispatch(listProduct(keyword, pagenumber));
  }, [dispatch, keyword, pagenumber]);
  return (
    <>
      <div className='container'>
        <div className='section'>
          <div className='row'>
            <div className='col-lg-12 col-md-12 article'>
              <div className='shopcontainer row'>
                {loading ? (
                  <div className='mb-5'>
                    <Loading />
                  </div>
                ) : error ? (
                  <Message variant='alert-danger'>{error}</Message>
                ) : (
                  <>
                    {products.map((product) => (
                      <div
                        className='shop col-lg-4 col-md-6 col-sm-6'
                        key={product._id}
                      >
                        <div className='border-product'>
                          <Link to={`/products/${product._id}`}>
                            <div className='shopBack'>
                              <img src={product.image} alt={product.name} />
                            </div>
                          </Link>

                          <div className='shoptext'>
                            <p>
                              <Link to={`/products/${product._id}`}>
                                {product.name}
                              </Link>
                            </p>

                            <Rating
                              value={product.rating}
                              text={`${product.numReviews} reviews`}
                            />
                            <h3>${product.price}</h3>
                          </div>
                        </div>
                      </div>
                    ))}
                  </>
                )}

                {/* Pagination */}
                <Pagination
                  pages={pages}
                  page={page}
                  keyword={keyword ? keyword : ''}
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default ShopSection;

分页组件在这里

import React from 'react';
import { Link } from 'react-router-dom';

const Pagination = (props) => {
  const { page, pages, keyword = '' } = props;
  return (
    pages > 1 && (
      <nav>
        <ul className='pagination justify-content-center'>
          {[...Array(pages).keys()].map((x) => (
            <li
              className={`page-item ${x + 1 === page ? 'active' : ''}`}
              key={x + 1}
            >
              <Link
                className='page-link'
                to={
                  keyword
                    ? `/search/${keyword}/page/${x + 1}`
                    : `/page/${x + 1}`
                }
              >
                {x + 1}
              </Link>
            </li>
          ))}
        </ul>
      </nav>
    )
  );
};

export default Pagination;

这是我的App.js组件

import React from 'react';
import './App.css';
import './responsive.css';
import 'react-toastify/dist/ReactToastify.css';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import HomeScreen from './screens/HomeScreen';
import SingleProduct from './screens/SingleProduct';
import Login from './screens/Login';
import Register from './screens/Register';
import CartScreen from './screens/CartScreen';
import ShippingScreen from './screens/ShippingScreen';
import ProfileScreen from './screens/ProfileScreen';
import PaymentScreen from './screens/PaymentScreen';
import PlaceOrderScreen from './screens/PlaceOrderScreen';
import OrderScreen from './screens/OrderScreen';
import NotFound from './screens/NotFound';
import PrivateRouter from './PrivateRoute';

const App = () => {
  return (
    <Router>
      <Switch>
        <Route path='/' component={HomeScreen} exact />
        <Route path='/search/:keyword' component={HomeScreen} exact />
        <Route path='/page/:pagenumber' component={HomeScreen} exact />
        <Route
          path='/search/:keyword/page/:pageNumber'
          component={HomeScreen}
          exact
        />
        <Route path='/products/:id' component={SingleProduct} />
        <Route path='/login' component={Login} />
        <Route path='/register' component={Register} />
        <PrivateRouter path='/profile' component={ProfileScreen} />
        <Route path='/cart/:id?' component={CartScreen} />
        <PrivateRouter path='/shipping' component={ShippingScreen} />
        <PrivateRouter path='/payment' component={PaymentScreen} />
        <PrivateRouter path='/placeorder' component={PlaceOrderScreen} />
        <PrivateRouter path='/order/:id' component={OrderScreen} />
        <Route path='*' component={NotFound} />
      </Switch>
    </Router>
  );
};

export default App;

当我尝试从邮递员发送请求时，数据返回正常。我已经调试了很多，但无法解决这个错误。帮助我解决这个问题，我将不胜感激

Answer 1

您必须定义页码，因为它尚未定义。

const pagenumber = match.params.pagenumber;

像这样定义它。
我希望它会起作用。