reactjs - 在 React 中将不同的参数带到同一页面时，数据未加载

Question

我是 React 新手，现在我正在开发一个电子商务网站，该网站在主页上有类别，单击该页面时，用户将被重定向到参数中包含类别 ID 的路径，在第二页上我们是获取与该类别 ID 相关的数据。但问题是当我们返回到同一页面时按下返回按钮后，任何其他类别 ID 数据都没有加载。但是，如果我们刷新该页面或返回主页，然后在刷新后再次访问该页面，数据将完全按照我们想要的方式加载。希望你得到我的问题，如果有任何解决方案分享..

import React, { lazy, Component } from "react";
//import { data } from "../../data";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faTh, faBars } from "@fortawesome/free-solid-svg-icons";
const Paging = lazy(() => import("../../components/Paging"));
const Breadcrumb = lazy(() => import("../../components/Breadcrumb"));
const FilterCategory = lazy(() => import("../../components/filter/Category"));
const FilterPrice = lazy(() => import("../../components/filter/Price"));
const FilterSize = lazy(() => import("../../components/filter/Size"));
const FilterStar = lazy(() => import("../../components/filter/Star"));
const FilterColor = lazy(() => import("../../components/filter/Color"));
const FilterTag = lazy(() => import("../../components/filter/Tag"));
const FilterClear = lazy(() => import("../../components/filter/Clear"));
const CardServices = lazy(() => import("../../components/card/CardServices"));
const CardProductGrid = lazy(() =>
  import("../../components/card/CardProductGrid")
);
const CardProductList = lazy(() =>
  import("../../components/card/CardProductList")
);

class ProductListView extends Component {
  state = {
    currentProducts: [],
    currentPage: null,
    totalPages: null,
    totalItems: 0,
    view: "list",
    cid: this.props.location.state,
    products: [],
  }
  componentDidMount() {
    // const reloadCount = sessionStorage.getItem('reloadCount');
    // if (reloadCount < 2) {
    //   sessionStorage.setItem('reloadCount', String(reloadCount + 1));
    //   window.location.reload();
    // } else {
    //   sessionStorage.removeItem('reloadCount');
    // }
    // const abcd = this.getProducts();
    // if (abcd.length == 0) {
    //   window.location.reload();
    // }
  }
  componentDidMount() {
    alert("did");
  }
  UNSAFE_componentWillMount() {
    alert("will");
    let products = this.getProducts();
    const totalItems = products.length;

    this.setState({ totalItems });
  }
  onPageChanged = (page) => {
    //this.calc();
    let products = this.getProducts();
    const totalItems = products.length;
    this.setState({ totalItems });
    // const { currentPage, totalPages, pageLimit } = page;
    // const offset = (currentPage - 1) * pageLimit;
    // const currentProducts = products.slice(offset, offset + pageLimit);
    const currentProducts = products;
    alert("pagechange");
    this.setState({ currentProducts });
    //this.setState({ currentPage, currentProducts, totalPages });
  };

  onChangeView = (view) => {
    alert("changeview");
    this.setState({ view });
  };

  getProducts = () => {
    alert("products");
    var { cid, products } = this.state;
    fetch('http://khel**********nfotech.online/API2/subcategory/' + cid)
      .then(res => res.json())
      .then(json => {
        this.setState({
          products: json.Data,
        })
      });
    return products;
  };

  render() {
    return (
      <React.Fragment>
        <div
          className="p-5 bg-primary bs-cover"
          style={{
            backgroundImage: "url(../../images/banner/first.jpg)",
            backgroundSize: "cover",
            backgroundRepeat: "no-repeat"
          }}
        >
          <div className="container text-center" style={{ width: "180px" }}>
            <span className="px-3 h3 bg-white rounded shadow d-none d-lg-block">
              Cricket
            </span>
          </div>
        </div>
        <Breadcrumb />
        <div className="container-fluid mb-3">
          <div className="row">
            <div className="col-md-3">
              <FilterCategory />
              <FilterPrice />
              <FilterSize />
              <FilterStar />
              <FilterColor />
              <FilterClear />
              <FilterTag />
              <CardServices />
            </div>
            <div className="col-md-9">
              <div className="row">
                <div className="col-md-8">
                  <span className="align-middle font-weight-bold">
                    {this.state.totalItems} results for{" "}
                    <span className="text-warning">"cricket"</span>
                  </span>
                </div>
                <div className="col-md-4">
                  <select
                    className="form-select mw-180 float-left"
                    aria-label="Default select"
                  >
                    <option value={1}>Most Popular</option>
                    <option value={2}>Latest items</option>
                    <option value={3}>Trending</option>
                    <option value={4}>Price low to high</option>
                    <option value={4}>Price high to low</option>
                  </select>
                  <div className="btn-group ml-3" role="group">
                    <button
                      aria-label="Grid"
                      type="button"
                      onClick={() => this.onChangeView("grid")}
                      className={`btn ${this.state.view === "grid"
                        ? "btn-primary"
                        : "btn-outline-primary"
                        }`}
                    >
                      <FontAwesomeIcon icon={faTh} />
                    </button>
                    <button
                      aria-label="List"
                      type="button"
                      onClick={() => this.onChangeView("list")}
                      className={`btn ${this.state.view === "list"
                        ? "btn-primary"
                        : "btn-outline-primary"
                        }`}
                    >
                      <FontAwesomeIcon icon={faBars} />
                    </button>
                  </div>
                </div>
              </div>
              <hr />
              <div className="row g-3">
                {this.state.view === "grid" &&
                  this.state.currentProducts.map((product, idx) => {
                    return (
                      <div key={idx} className="col-md-4">
                        <CardProductGrid data={product} />
                      </div>
                    );
                  })}
                {this.state.view === "list" &&
                  this.state.currentProducts.map((product, idx) => {
                    return (
                      <div key={idx} className="col-md-12">
                        <CardProductList data={product} />
                      </div>
                    );
                  })}
              </div>
              <hr />
              <Paging
                totalRecords={this.state.totalItems}
                pageLimit={9}
                pageNeighbours={3}
                onPageChanged={this.onPageChanged}
                sizing=""
                alignment="justify-content-center"
              />
            </div>
          </div>
        </div>
      </React.Fragment>
    );
  }
}

export default ProductListView;

标签： reactjsreact-hooksreact-router