变量不更改onclick

Question

我在这里阅读了许多不同类型的解决方案，但似乎没有什么是我需要的。

当用户单击图像时，我正在尝试更改变量“ CurrentIndex”。

目前，更改已在OnClick函数内部到达，但不会更改外部变量。不知道我在做什么错。

我的最终目标是让用户能够单击缩略图图像并更改主图像。如果有更好的方法，请愿意。

const gallery = 
  product.images.length > 1 ? (
    <Grid gap={2} columns={4}>
      {product.images.map((img, index) => (
        <Thumbnail 
          image={img}
          key={img.id}
          alt={product.title}
          index={index}
          onClick={() => changeImage(index)}
        />
      ))}
    </Grid>
  ) : null;

let currentIndex = 0;

let changeImage = function(index) {
  currentIndex = index;

  console.log("currentindex inside changeImage Function is: " + currentIndex) // This returns the current index of the image clicked as it should.

  return currentIndex;
}

console.log("currentindex outside changeImage Function is: " + currentIndex)// This returns "0" still

下面的代码是主要图像。

<div>
  {console.log('currentindex inside return is: ' + currentIndex)}//This returns 0 as well still

  <GatsbyImage
    image={product.images[currentIndex].gatsbyImageData}
    alt={product.title}
  />          
  <div>
    {gallery}
  </div>
</div>

不确定是否需要此代码，但以下是“缩略图”元素的代码

/** @jsx jsx */
import { jsx } from 'theme-ui'
import { GatsbyImage } from 'gatsby-plugin-image'

export const Thumbnail = ({ image, onClick, alt, index }) => {

  return (
    <button
      sx={{
        cursor: "pointer",
        border: "none",
        padding: "2px",
        backgroundColor: "white",
      }}
      onClick={onClick}
    >
      <GatsbyImage
        image={image.gatsbyImageData}
        alt={alt}
      />
    </button>
  )
}

Answer 1

现在，您正在尝试使用CurrentIndex使用Let currentIndex = 0;。在React中，您需要使用状态跟踪CurrentIndex ，以便您的其他组件（例如主图像）可以基于CurrentIndex。

而不是让CurrentIndex = 0;，currentIndex带有usestate之类的：

const [currentIndex, setCurrentIndex] = useState(0);

确保导入usestate ：从'react''; import {usestate}

然后，您可以更改changeimage函数以设置currentIndex的状态这样：

let changeImage = function(index) {
  setCurrentIndex(index);
}

---

为什么这样做这边走？因为您需要触发 rerender CurrentIndex任何地方。除非A 状态更新在该组件中或父母中发生，否则是组件一部分的代码，这就是为什么console.logs 代码>和图像未更新。