Как поменять порядок элементов в массиве?

Question

[Константин]

В интернете ответа на этот вопрос на нашел, потому прошу тут.
Делаю проект на Реакте.

есть массив. Необходимо по нажатию на стрелочку вправо и влево менять порядок элементов в массиве.

Как это сделать?

Причем элементы массива - объекты со множеством свойств.

Comments

[Алан Гибизов]

В интернете ответа на этот вопрос на нашел

Тут полезно было бы показать, какие вопросы задавали поисковым системам.

[Константин]

Алан Гибизов, а помощь будет?

[Алан Гибизов]

Константин, признаться, не вижу вообще смысла помогать вам. У вас половина вопросов - "сделайте за меня". Вы совершенно не обучаетесь и не пытаетесь хотя бы делать свои вопросы в соответствии с Регламентом данного ресурса. Вам просто пофиг.
Ну и кто захочет помогать-то? Люди тут делают это потому, что им "по-приколу". Но им хочется хоть немного уважения.

[Александр Антонов]

Алан Гибизов, Вообще по идее правильно говорите, я помню делал похожие задачи и решил немного освежить память, не потому что помочь хочется а просто интересно стало повторить

[Алан Гибизов]

Александр Антонов, ну, может Вам и будет любопытно сделать задачку за автора. Мало ли кому что прикольно :) кому-то просто размять "мозговую мышцу".

Я бы сейчас на месте всех попрошаек просто спрашивал бы ChatGPT - он, если его правильно спросить, вполне адекватные решения дает. Но, видимо, даже на это не все способны.

[Александр]

Константин,
Не особо понятно, вы бы хоть пример какой то выложили, какие то попытки и тд.
Если это то, о чем я думаю..
Чтобы изменить порядок элементов в массиве, попробуй использовать методы reverse() и splice(), а затем обновляй состояние компонента.

Что то типо этого, где items содержит массив объектов.
При клике на кнопку вправо или влево вызываем соответствующую функцию обработчика, которая изменяет порядок элементов в массиве с помощью метода splice() и обновляет текущий индекс элемента.
После этого обновленный массив передается в функцию setItems(), которая обновляет состояние компонента.

import { useState } from 'react';

function App() {
  const [items, setItems] = useState([
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' },
    { id: 4, name: 'Item 4' },
  ]);
  const [currentIndex, setCurrentIndex] = useState(0);

  const handleMoveLeft = () => {
    if (currentIndex > 0) {
      setItems(prevItems => {
        const newItems = [...prevItems];
        newItems.splice(currentIndex - 1, 0, newItems[currentIndex]);
        newItems.splice(currentIndex + 1, 1);
        setCurrentIndex(currentIndex - 1);
        return newItems;
      });
    }
  };

  const handleMoveRight = () => {
    if (currentIndex < items.length - 1) {
      setItems(prevItems => {
        const newItems = [...prevItems];
        newItems.splice(currentIndex + 2, 0, newItems[currentIndex]);
        newItems.splice(currentIndex, 1);
        setCurrentIndex(currentIndex + 1);
        return newItems;
      });
    }
  };

  return (
    <div>
      <ul>
        {items.map((item, index) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
      <button onClick={handleMoveLeft}>Влево</button>
      <button onClick={handleMoveRight}>Вправо</button>
    </div>
  );
}

export default App;

[Александр Антонов]

Алан Гибизов, не особо мне нравится перекладывание всего и вся на ии

[Александр Антонов]

Александр, в ответы кинь, зачем ответ в комментарии выкладывать :-)

[Алан Гибизов]

Александр Антонов, ИИ не умеют мечтать. В остальном они каждый в своей области лучше человека. Они как джинн из сказки - всемогущий, он ждёт от вас желаний.
Человек - это генератор желаний.

Answer 1

[Andrey]

Можно воспользоваться .splice().

const sortingItems = [{},{}]
const newItemsOrder = [...sortingItems];  
newItemsOrder.splice(prevIndex, 1);
newItemsOrder.splice(nextIndex, 0, sortingItems[prevIndex]);

Answer 2

[Александр Антонов]

Может быть немного корявый но рабочий вариант, можно сделать проще если просто поле order местами менять и сортировать по нему

type MoveData = ((dir: "left" | "right", i: number) => void)

type TestItemProps = {
  data: { name: string }, i: number, onMove: MoveData
}

const TestItem: FC<TestItemProps> = ({ data, i, onMove }) => {
  return (
    <div>
      <div style={{ display: "flex", justifyContent: "space-between" }}>
        <span
          style={{ cursor: "pointer" }}
          onClick={() => onMove("left", i)}
        >◀</span>
        <span
          style={{ cursor: "pointer" }}
          onClick={() => onMove("right", i)}
        >▶</span>
      </div>
      <span>{data.name}</span>
    </div>
  )
}

function Test() {
  const [state, setState] = useState([
    { name: "Petya", order: 0 },
    { name: "Nikita", order: 1 },
    { name: "Sasha", order: 2 },
    { name: "Valera", order: 3 },
  ])

  const onMoveHandle: MoveData = (dir, prev) => {
    const isLeftBlock = prev === 0 && dir === "left"
    const isRightBlock = prev === state.length - 1 && dir === "right"

    if (isLeftBlock || isRightBlock) return

    const next = dir === "left" ? prev - 1 : prev + 1

    setState((past) => past.reduce((acc: { name: string, order: number }[], it, i, arr) => {
      if (![prev, next].includes(i))
        acc.push(it)
      else {
        if (i === prev) acc.push(arr[next])
        else acc.push(arr[prev])
      }

      return acc
    }, []))
  }

  return (
    <div style={{ display: "flex", columnGap: "10px" }}>
      {state.map((it, i) => (
        <TestItem
          data={it} i={i} onMove={onMoveHandle} key={i}
        />
      ))}
    </div>
  )
}