Коряво работает пагинация, почему?

Главный код
import React, { useState } from "react";
import Json from "../JSON/Salad";
import styles from "../Drawer.module.scss";
import Pagination from "./Pagination";

function Salad(props) {
  const [json, setJson] = useState(Json);

  const [currentPage, setCurrentPage] = useState(0);
  const [countriesPerPage] = useState(6);
  const page = (pageNumber) => setCurrentPage(pageNumber);

  const nextPage = () => {
    setCurrentPage((prev) =>
      prev < json[0].length / countriesPerPage - 1 ? prev + 1 : prev
    );
  };
  const prevPage = () => {
    setCurrentPage((prev) =>
      prev > json[0].length / json[0].length - 1 ? prev - 1 : prev
    );
  };

  function changeMinus(a, b) {
    if (a.price > b.price) return -1;
    if (a.price == b.price) return 0;
    if (a.price < b.price) return 1;
  }

  function changePlus(a, b) {
    if (a.price > b.price) return 1;
    if (a.price == b.price) return 0;
    if (a.price < b.price) return -1;
  }
  function changePopular(a, b) {
    if (a.price > b.price) return 1;
    if (a.price == b.price) return 0;
    if (a.price < b.price) return -1;
  }
  function changeDiscussed(a, b) {
    if (a.price > b.price) return -1;
    if (a.price == b.price) return 0;
    if (a.price < b.price) return 1;
  }
  function changeBest(a, b) {
    if (a.name > b.name) return -1;
    if (a.name == b.name) return 1;
    if (a.name < b.name) return 0;
  }
  React.useEffect(() => {
    const newArr = [...json];

    if (props.selected === "По популярности") {
      for (let i = 0; i < newArr.length; i++) {
        newArr[i].sort(changePopular);
      }
    } else if (props.selected === "По возрастанию цены") {
      for (let i = 0; i < newArr.length; i++) {
        newArr[i].sort(changePlus);
      }
    } else if (props.selected === "По уменьшению цены") {
      for (let i = 0; i < newArr.length; i++) {
        newArr[i].sort(changeMinus);
      }
    } else if (props.selected === "Сначала обсуждаемые") {
      for (let i = 0; i < newArr.length; i++) {
        newArr[i].sort(changeDiscussed);
      }
    } else if (props.selected === "Сначала с лучшей оценкой") {
      for (let i = 0; i < newArr.length; i++) {
        newArr[i].sort(changeBest);
      }
    }
    setJson(newArr);
  }, [props]);

  function division(arr, chunkSize) {
    const res = [];
    while (arr.length > 0) {
      const chunk = arr.splice(0, chunkSize);
      res.push(chunk);
    }
    return res;
  }
  const f = [...json[0]];
  const arrX = division(f, 6);
  let block = arrX[currentPage].map((item, index) => (
    <div className={styles.item_description} key={index}>
      <img
        className={styles.salad}
        src={item.image}
        height="200px"
        width="305px"
      />
      <div className={styles.double}>
        <p className={styles.quantity}>{item.quantity}</p>
        <p className={styles.priceLow}>{item.price}</p>
      </div>
      <p className={styles.name}>{item.name}</p>
      <p className={styles.price}>{item.price}</p>
    </div>
  ));
  let z = [];
  arrX.forEach((item, index) => {
    z.push(index);
  });
  return (
    <div className={styles.ItemsAndFlip}>
      <div className={styles.items}>{block}</div>
      <div className={styles.flipping}>
        <button className={styles.btn_primary_Prev} onClick={prevPage}>
          {"<"}
        </button>
        <Pagination
          currentPage={currentPage}
          countriesPerPage={countriesPerPage}
          totalCountries={json[0].length}
          page={page}
        />
        <button className={styles.btn_primary_Next} onClick={nextPage}>
          {">"}
        </button>
      </div>
    </div>
  );
}

export default Salad;


Пагинация
import React, { useEffect, useState } from "react";
import styles from "../Drawer.module.scss";

const Pagination = ({
  countriesPerPage,
  totalCountries,
  currentPage,
  page,
}) => {
  const pageNumbers = [];
  for (let i = 0; i < Math.ceil(totalCountries / countriesPerPage); i++) {
    pageNumbers.push(i);
  }

  const [arrOfCurrButtons, setArrOfCurrButtons] = useState([]);

  useEffect(() => {
    let tempNumberOfPages = [...pageNumbers];

    let dotsInitial = "...";
    let dotsLeft = "... ";
    let dotsRight = " ...";
    if (currentPage >= 0 && currentPage <= 3) {
      tempNumberOfPages = [0, 1, 2, 3, 4, dotsLeft, pageNumbers.length - 1];
    } else if (currentPage === 4) {
      const sliced = pageNumbers.slice(1, 6);
      tempNumberOfPages = [...sliced, dotsInitial, pageNumbers.length - 1];
    } else if (currentPage > 4 && currentPage < pageNumbers.length - 2) {
      // from 5 to 8 -> (10 - 2)
      const sliced1 = pageNumbers.slice(currentPage - 2, currentPage); // sliced1 (5-2, 5) -> [4,5]
      const sliced2 = pageNumbers.slice(currentPage, currentPage + 1); // sliced1 (5, 5+1) -> [6]
      tempNumberOfPages = [
        1,
        dotsInitial,
        ...sliced1,
        ...sliced2,
        dotsInitial,
        pageNumbers.length - 1,
      ]; // [1, '...', 4, 5, 6, '...', 10]
    } else if (currentPage > pageNumbers.length - 3) {
      // > 7
      const sliced = pageNumbers.slice(pageNumbers.length - 4); // slice(10-4)
      tempNumberOfPages = [1, dotsRight, ...sliced];
    } else if (currentPage === dotsInitial) {
      // [1, 2, 3, 4, "...", 10].length = 6 - 3  = 3
      // arrOfCurrButtons[3] = 4 + 1 = 5
      // or
      // [1, 2, 3, 4, 5, "...", 10].length = 7 - 3 = 4
      // [1, 2, 3, 4, 5, "...", 10][4] = 5 + 1 = 6
      page(arrOfCurrButtons[arrOfCurrButtons.length - 3] + 1);
    } else if (currentPage === dotsRight) {
      page(arrOfCurrButtons[3] + 2);
    } else if (currentPage === dotsLeft) {
      page(arrOfCurrButtons[3] - 2);
    }

    setArrOfCurrButtons(tempNumberOfPages);
    page(currentPage);
  }, [currentPage]);
  return (
    <div className={styles.pagination}>
      {arrOfCurrButtons.map((number, index) => (
        <p key={index} onClick={() => page(number)}>
          {number}
        </p>
      ))}
    </div>
  );
};

export default Pagination;



база с инф-ей
const Json = [
  [
    {
      image: "../img/Салаты/Ананас, курица, сыр и чеснок.jpg",
      name: "Салат с ананасом, курицей, сыром и чесноком",
      price: "59 руб",
      basket: "В корзину",
    },
    {
      image: "../img/Салаты/Винегрет.jpg",
      name: "Салат Винегрет",
      price: "49 руб",
      basket: "В корзину",
    },
    {
      image: "../img/Салаты/Крабовые палочки.jpg",
      name: "Салат с крабовыми палочками",
      price: "44 руб",
      basket: "В корзину",
    },
    {
      image: "../img/Салаты/Морковь, майонез и чеснок.jpg",
      name: "Салат с марковью, майонезом и чесноком",
      price: "41 руб",
      basket: "В корзину",
    },
    {
      image: "../img/Салаты/Оливье.jpg",
      name: "Салат Ольвие",
      price: "44 руб",
      basket: "В корзину",
    },
    {
      image: "../img/Салаты/Цезарь.jpg",
      name: "Салат Цезарь",
      price: "59 руб",
      basket: "В корзину",
    },
    {
      image: "../img/Салаты/Оливье.jpg",
      name: "Салат Ольвие",
      price: "44 руб",
      basket: "В корзину",
    },
    {
      image: "../img/Салаты/Цезарь.jpg",
      name: "Салат Цезарь",
      price: "59 руб",
      basket: "В корзину",
    },
    {
      image: "../img/Салаты/Ананас, курица, сыр и чеснок.jpg",
      name: "Салат с ананасом, курицей, сыром и чесноком",
      price: "59 руб",
      basket: "В корзину",
    },
    {
      image: "../img/Салаты/Винегрет.jpg",
      name: "Салат Винегрет",
      price: "49 руб",
      basket: "В корзину",
    },
    {
      image: "../img/Салаты/Крабовые палочки.jpg",
      name: "Салат с крабовыми палочками",
      price: "44 руб",
      basket: "В корзину",
    },
    {
      image: "../img/Салаты/Морковь, майонез и чеснок.jpg",
      name: "Салат с марковью, майонезом и чесноком",
      price: "41 руб",
      basket: "В корзину",
    },
    {
      image: "../img/Салаты/Оливье.jpg",
      name: "Салат Ольвие",
      price: "44 руб",
      basket: "В корзину",
    }
];

export default Json;


Проблема в следующем: при нажатии "..."у меня появляется белый экран, хотя я сделал так, чтобы по нажатию'...'происходили другие действия, а именно эти:

let dotsInitial = "...";
    let dotsLeft = "...";
    let dotsRight = "...";

else if (currentPage === dotsInitial) {
      // [1, 2, 3, 4, "...", 10].length = 6 - 3  = 3
      // arrOfCurrButtons[3] = 4 + 1 = 5
      // or
      // [1, 2, 3, 4, 5, "...", 10].length = 7 - 3 = 4
      // [1, 2, 3, 4, 5, "...", 10][4] = 5 + 1 = 6
      page(arrOfCurrButtons[arrOfCurrButtons.length - 3] + 1);
    } else if (currentPage === dotsRight) {
      page(arrOfCurrButtons[3] + 2);
    } else if (currentPage === dotsLeft) {
      page(arrOfCurrButtons[3] - 2);
    }


Как исправить? Что не устраивает react?

СПАСИБО!
  • Вопрос задан
  • 192 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы