React：点击按钮切换JSON数组对应元素的图片src

你的核心问题是全局状态被所有列表项共享，导致点击按钮时所有图片同步变化。下面提供两种实用的解决思路，按需选择：

方案一：拆分独立子组件（推荐，符合组件化思想） #

把每个列表项封装成独立组件，让组件自身维护当前显示的图片索引，彻底隔离各列表项的状态。

代码示例 #

假设你的JSON数据结构如下：

const items = [
  { id: 1, img_src: "single-image.jpg" }, // 单张图片
  { id: 2, img_src: ["img1.jpg", "img2.jpg", "img3.jpg"], img_count: 3 }, // 图片数组
  // 更多项...
];

子组件 ItemCard

import { useState } from 'react';

const ItemCard = ({ item }) => {
  // 初始化索引：单图固定为0，多图初始为0
  const [currentImgIndex, setCurrentImgIndex] = useState(0);
  
  const isMultiImage = Array.isArray(item.img_src);
  const currentImage = isMultiImage ? item.img_src[currentImgIndex] : item.img_src;

  // 切换上一张（单图不响应）
  const handlePrev = () => {
    if (!isMultiImage) return;
    setCurrentImgIndex(prev => prev > 0 ? prev - 1 : 0);
  };

  // 切换下一张（单图不响应）
  const handleNext = () => {
    if (!isMultiImage) return;
    setCurrentImgIndex(prev => prev < item.img_src.length - 1 ? prev + 1 : prev);
  };

  return (
    <div className="item-card">
      <button onClick={handlePrev} disabled={!isMultiImage || currentImgIndex === 0}>←</button>
      <img src={currentImage} alt={`Item ${item.id} image`} />
      <button onClick={handleNext} disabled={!isMultiImage || currentImgIndex === item.img_src.length - 1}>→</button>
    </div>
  );
};

父组件渲染

const ParentComponent = () => {
  return (
    <div className="items-container">
      {items.map(item => (
        <ItemCard key={item.id} item={item} />
      ))}
    </div>
  );
};

方案二：父组件集中管理索引状态 #

如果不想拆分组件，可以在父组件中用一个对象存储每个列表项的当前图片索引，通过唯一ID区分不同项。

代码示例 #

import { useState } from 'react';

const ParentComponent = () => {
  const items = [/* 你的JSON数据 */];
  
  // 初始化索引对象：仅为多图项设置初始索引0
  const [imgIndices, setImgIndices] = useState(() => {
    const initial = {};
    items.forEach(item => {
      if (Array.isArray(item.img_src)) initial[item.id] = 0;
    });
    return initial;
  });

  const handlePrev = (itemId, imgArray) => {
    setImgIndices(prev => ({
      ...prev,
      [itemId]: prev[itemId] > 0 ? prev[itemId] - 1 : 0
    }));
  };

  const handleNext = (itemId, imgArray) => {
    setImgIndices(prev => ({
      ...prev,
      [itemId]: prev[itemId] < imgArray.length - 1 ? prev[itemId] + 1 : prev[itemId]
    }));
  };

  return (
    <div className="items-container">
      {items.map(item => {
        const isMultiImage = Array.isArray(item.img_src);
        const currentIndex = isMultiImage ? imgIndices[item.id] : 0;
        const currentImage = isMultiImage ? item.img_src[currentIndex] : item.img_src;

        return (
          <div key={item.id} className="item-card">
            <button 
              onClick={() => handlePrev(item.id, item.img_src)} 
              disabled={!isMultiImage || currentIndex === 0}
            >←</button>
            <img src={currentImage} alt={`Item ${item.id} image`} />
            <button 
              onClick={() => handleNext(item.id, item.img_src)} 
              disabled={!isMultiImage || currentIndex === item.img_src.length - 1}
            >→</button>
          </div>
        );
      })}
    </div>
  );
};

关键注意点 #

• 必须给每个列表项设置唯一ID，用来区分不同项的状态，避免渲染混乱。
• 单图项可以通过disabled属性禁用按钮，或直接隐藏按钮，提升用户体验。
• 两种方案都做了边界判断，防止索引越界导致报错。

内容的提问来源于stack exchange，提问作者superbsumit