渲染后状态重置为 0

Question

我正在从unsplash 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.