Reactjs 更改数组中对象的位置

我有一个功能组件，它有一个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>
    );

这是单击按钮之前的样子，我尝试将第一个对象作为数组中的最后一个对象放置。如果调用该函数，我会得到：“TypeError:images.map不是函数”

---

Array.push返回数组的新长度，因此在此处使用

concat

函数：

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

更新的ans：

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

---

Array.push返回数组的新长度，因此这里要使用

concat

函数：

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

更新的ans：

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

---

正如已经指出的，array:：push返回数组的新长度，而不是数组。基本上，您需要向左/向右旋转阵列

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]]);
};

---

如前所述，array:：push返回数组的新长度，而不是数组。基本上，您需要向左/向右旋转阵列

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]]);
};

---

这是因为array.push返回的是数组的新长度，而不是新数组本身。听起来你要做的是制作幻灯片，这样当你向左点击第一张图像时，它将显示最后一张图像。这是因为array.push返回数组的新长度，而不是新的数组本身听起来像是你要做的是做一个幻灯片放映，这样当你在第一张图像上点击左键时，它将显示最后一张图像。这修复了错误，但我的对象仍处于修复错误的相同位置，但我的对象仍处于相同位置