Question

我正在尝试制作分页组件。

但是totalPost={products.length}无效

因为长度未定义。

我如何获得产品长度？

import React, { useEffect, useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import { getAllProducts } from "../actions/productAction";
import Product from "../components/Product";
import LoadingBox from "../components/LoadingBox";
import MessageBox from "../components/MessageBox";
import Pagination from "../components/Pagination";

HomeScreen.js

const HomeScreen = (props) => {
  const [searchKeyword, setSearchKeyword] = useState("");
  const [sortOrder, setSortOrder] = useState("newest");

  const [currentPage, setCurrentPage] = useState(1);
  const [limit] = useState(2);

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

  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getAllProducts());
  }, [dispatch]);

  const submitHandler = (e) => {
    e.preventDefault();
    dispatch(getAllProducts("", "", "", searchKeyword, sortOrder));
  };

  const sortHandler = (e) => {
    setSortOrder(e.target.value);
    dispatch(getAllProducts("", "", "", searchKeyword, sortOrder));
  };

  const paginate = (page) => {
    setCurrentPage(page);
  };

  const previousClick = () => {
    setCurrentPage(currentPage - 1);
  };

  const nextClick = () => {
    setCurrentPage(currentPage + 1);
  };

  console.log(sortOrder);
  console.log(currentPage);

  return (
    <div>
      <ul className="filter">
        <li>
          <form onSubmit={submitHandler}>
            <input
              name="searchKeyword"
              onChange={(e) => setSearchKeyword(e.target.value)}
            ></input>
            <button type="submit" className="primary">
              Search
            </button>
          </form>
        </li>
        <li>
          <select name="sortOrder" onChange={sortHandler}>
            <option value="newest">new</option>
            <option value="highest">highest</option>
            <option value="lowest">lowest</option>
          </select>
        </li>
      </ul>
      {loading ? (
        <LoadingBox></LoadingBox>
      ) : error ? (
        <MessageBox variant="danger">{error}</MessageBox>
      ) : (
        <div>

          <div className="row center">
            {products.map((product) => (
              <Product key={product._id} product={product}></Product>
            ))}
          </div>
          <div className="row center">
              <Pagination
                previousClick={previousClick}
                nextClick={nextClick}
                totalPost={products.length} /*problem occur*/
                limit={limit}
                paginate={paginate}
                products={products}
              ></Pagination>
          </div>

        </div>
      )}
    </div>
  );
};

export default HomeScreen;

产品

productController.js

productAction.js

productReducer.js

我的github存储库：https://github.com/k3kys/shop3

Answer 1

在某些情况下，您的products在getAllProductsReducer中可能是未定义的。当您收到PRODUCT_LIST_REQUEST或PRODUCT_LIST_FAIL时，您的产品将不确定（您未在返回的对象中设置products）

只需检查未定义的内容或默认为空数组即可

  const { loading, error, products = [] } = productList;

无法在反应中读取未定义的属性“长度”

1 个答案: