Обертывание массивов в ReactJS

Я хочу вывести на экран какой-то текст, возможно, отзывы, или просто картинки, чтобы я мог увидеть следующее и предыдущее изображение, нажав на соответствующие кнопки. Для этого мне нужно знать, как оборачивать массивы. В этом посте я покажу это.

Вы можете найти исходный код здесь => https://github.com/muratcan-yuksel/react-wrap-array.

Для начала я создаю файл data.js и помещаю в него следующее =>

const data = [
  {
    id: 1,
    text: "1st Text",
  },
  {
    id: 2,
    text: "2nd Text",
  },
  {
    id: 3,
    text: "3rd Text",
  },
  {
    id: 4,
    text: "4th Text",
  },
  {
    id: 5,
    text: "5th Text",
  },
];
export default data;
Вход в полноэкранный режим Выйти из полноэкранного режима

В моем приложении я не хочу просматривать этот массив объектов. Нет, я хочу каждый раз отображать только один из них. Проверьте мой файл App.js =>

import React, { useState } from "react";
import data from "./data";
import "./style.css";

const App = () => {
  const [index, setIndex] = useState(0);
  const { id, text } = data[index];

  const nextItem = () => {
    setIndex((index) => {
      let newIndex = index + 1;
      return wrapItems(newIndex);
    });
  };

  const previousItem = () => {
    setIndex((index) => {
      let newIndex = index - 1;
      return wrapItems(newIndex);
    });
  };

  const wrapItems = (itemIndex) => {
    if (itemIndex > data.length - 1) {
      return 0;
    } else if (itemIndex < 0) {
      return data.length - 1;
    } else {
      return itemIndex;
    }
  };

  return (
    <div id={id} className="container">
      <div className="title">{text} </div>
      <div className="buttons">
        <button onClick={previousItem} className="btn">
          Previous
        </button>
        <button onClick={nextItem} className="btn">
          Next
        </button>
      </div>
    </div>
  );
};

export default App;
Войти в полноэкранный режим Выйти из полноэкранного режима

Я начинаю с импорта хука useState из React, файла data.js, который я только что создал, и файла style.css, о котором вам не стоит беспокоиться. Если вы хотите проверить его, я все равно предоставил исходный код выше.

Я установил состояние 0, это будет индекс элемента, который я хочу отобразить на странице из массива data. С const { id, text } = data[index]; я деструктурирую приходящие данные так, что всякий раз, когда я захочу использовать переменные text или id, они будут указывать на элемент в массиве данных с индексом state. Это означает, что если состояние изменится, то id и text будут указывать на другой элемент в массиве данных из data.js.

Теперь в моем операторе возврата я отображаю ₺ext, а также имею две кнопки: Одна из них указывает на предыдущий элемент, а другая — на следующий. К ним также прикреплены некоторые функции.

Функция nextItem устанавливает состояние в plus одно из того, что есть. Теперь, поскольку я не могу изменить состояние напрямую, мне придется обойтись и написать функцию для манипулирования index. Функция previousItem такая же, за исключением того, что она устанавливает состояние в минус один из того, что есть на данный момент. Но вы также заметите, что возвращаемый newIndex обернут внутри функции wrapItems'.

Причина существования функции wrapItems в том, что если бы ее не было, то всякий раз, когда мы дойдем до последнего элемента в массиве данных, который является 5-м элементом, потому что я поместил в массив только 5 элементов, что означает 4-й индекс, поскольку индексы начинаются с 0, функция nextItem будет продолжать обновлять состояние до плюс одного, что сделает индекс 5, и наше приложение потерпит крах. Это произойдет потому, что у нас нет элемента с индексом 5 в нашем массиве данных. Черт, у нас вообще нет индекса 5. То же самое произойдет и с функцией previousItem, очевидно, приложение упадет на индексе -1. Функция wrapItems устраняет эту проблему.

Теперь функция wrapItems принимает число и, вероятно, интерпретируется как so=>

  • Если данное число, которое является индексом, пришедшим из состояния, больше, чем последний индекс массива данных (который равен 4, так как элементов 5, а индексы начинаются с 0), то возвращается 0, чтобы мы начали с самого начала.
  • Если индекс меньше 0, что означает, что мы находимся на первом индексе, что также означает, что мы можем попасть в мир отрицательных чисел, что приведет к краху нашего приложения, давайте обновим состояние до последнего индекса массива данных, чтобы, когда мы запустим функцию previousItem, нажав соответствующую кнопку, когда мы находимся на первом элементе, нам был представлен последний элемент, а не крах приложения.
  • В остальном, все в порядке, ничего не делайте.

Вот и все. Будьте здоровы!

Оцените статью
devanswers.ru
Добавить комментарий