Question

我正在从未启动的api渲染照片。并且我保留要在灯箱中使用的照片的索引，在imageindex的初始渲染状态回到0后，如何保留其值？我将显示一些代码

 const ImageList = ({ image, isLoaded }) => {
      const [imageIndex, setImageIndex] = useState(0);
      const [isOpen, setIsOpen] = useState('false');
const onClickHandler = (e) => {
    setIsOpen(true);
    setImageIndex(e.target.id);
  };

  const imgs = image.map((img, index) => (
    <img
      id={index}
      key={img.id}
      src={img.urls.small}
      onClick={onClickHandler}

if (isOpen === true) {
    return (
      <Lightbox

        onCloseRequest={() => setIsOpen(false)}
        mainSrc={image[imageIndex].urls.regular}
        onMoveNextRequest={() => setImageIndex((imageIndex + 1) % image.length)}
        onMovePrevRequest={() => setImageIndex((imageIndex + image.length - 1) % image.length)}
        nextSrc={image[(imageIndex + 1) % image.length].urls.regular}
        prevSrc={image[(imageIndex + image.length - 1) % image.length].urls.regular}

      />

Answer 1

在初始呈现状态之后，imageIndex返回到0。

这很有意义，初始渲染将使用您设置为默认值的任何值。您可以使用类似local storage的名称来帮助您跟踪上次使用的项目的索引。这有点原始，但是直到您为数据库集合集成Node/MongoDB之类的东西，这才是完美的。

在您的组件中，从React导入useEffect()。这个钩子使我们可以在state-index值更改时执行任何逻辑，或者您可能会想到其他任何东西。

import React, { useEffect } from "react"

然后在组件内部，定义两个useEffect()块。

在初始负载下从localStorage获取上次使用的索引：

useEffect(() => {
   const lastIndex = localStorage.getItem("index", imageIndex)
   setImageIndex(imageIndex)
}, []) //set as an empty array so it will only execute once.

更改时将索引保存到localStorage：

useEffect(() => {
   localStorage.setItem("index", imageIndex)
}, [imageIndex]) //define values to subscribe to here. Will execute anytime value changes.

渲染后状态重置为0

1 个答案: