Изменить положение объектов внутри массива

Question

У меня есть функциональный компонент, который имеет useState, который содержит информацию, которую я хочу отобразить, и изображения.

  const [images, setImages] = useState(
        [
            {
                "index": 0,
                "img": Volleyball,
                "text": ' Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero ut dolorem dolore modi esse reprehenderit assumenda error aut ducimus, aliquam repudiandae aliquid deserunt voluptatum placeat fugit explicabo dignissimos cum tempore.'
            },
            {
                "index": 1,
                'img': Gaming,
                "text": ' Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero ut dolorem dolore modi esse reprehenderit assumenda error aut ducimus, aliquam repudiandae aliquid deserunt voluptatum placeat fugit explicabo dignissimos cum tempore.'
            },
            {
                'index': 2,
                'img': Coding,
                "text": ' Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero ut dolorem dolore modi esse reprehenderit assumenda error aut ducimus, aliquam repudiandae aliquid deserunt voluptatum placeat fugit explicabo dignissimos cum tempore.'
            }
        ]
    )

И это jsx, который я имею в теле возврата с левой кнопкой, которая Функция prevImage.

 return (
        <div className={classes.gallary}>
            <div className={classes.direction}>
                <button className={classes.leftArrow} onClick={prevImage}>Left</button>
                <button className={classes.rightArrow} >Right</button>
            </div>
            <div className={classes.images}>
                {images.map(current => {
                    return (
                        <div key={current.index}>
                            <img src={current.img} alt="" className={classes.image} />
                        </div>
                    )
                })}
            </div>

        </div>
    );

Вот функция prevImage:

 const prevImage = () => {
        const currentImgArray = [...images];
        const sendToBack = currentImgArray.push(currentImgArray.pop());
        setImages(sendToBack)
    }

Вот как это выглядит перед нажатием кнопки, и я пытаюсь разместить первый объект как последний объект в массиве. Если функция вызывается, я получаю: «Ошибка типа: images.map не является функцией»

Answer 1

Как уже указывалось, array :: pu sh возвращает новую длину массива, а не массива. В основном вам нужно вращать массив влево / вправо.

const prevImage = () => {
  // moves last image to front of array
  setImages(images => [images[images.length - 1], ...images.slice(0, -1)]);
};
const nextImage = () => {
  // moves first image to end of array
  setImages(images => [...images.slice(1), images[0]]);
};

Answer 2

Array.pu sh возвращает новую длину массива, поэтому здесь должна использоваться функция concat:

 const prevImage = () => {
        const currentImgArray = [...images];
        const sendToBack = currentImgArray.concat(currentImgArray.pop());
        setImages(sendToBack)
    }

Обновленный ответ:

 const prevImage = () => {
        setImages(prevState => {const popArr = prevState.pop();
                                return prevState.concat(popArr);
         })
    }