变量不改变 onClick

Question

我在这里阅读了很多不同类型的解决方案，但 none 似乎正是我所需要的。

我正在尝试在用户单击图像时更改变量“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 中，你会想要 使用 state 来跟踪 currentIndex 以便你的其他组件（例如主图像）可以根据 currentIndex.

而不是 let currentIndex = 0;，像这样用 useState 初始化 currentIndex：

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

确保同时导入 useState：import {useState} from 'react';

然后您可以更改 changeImage 函数来设置 currentIndex 的状态，如下所示：

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

为什么要这样做？因为你需要触发一个rerender才能在任何地方使用新更新的currentIndex。作为组件一部分的代码仅运行一次 ，除非在该组件或父组件中发生 state 更新，这就是为什么 console.logs 并且 Image 没有更新。

变量不改变 onClick

Variable not changing onClick

javascript

return

onclick

variable-assignment

reactjs