React中使用useState更新图片SRC数组为何不触发重新渲染？

核心问题 #

React状态更新依赖引用变化，你直接修改原数组再传入setState，数组引用没改变，React识别不到状态变化，所以不触发重渲染。另外还有几个影响功能的细节问题：

具体问题及修复步骤 #

1. 不要直接修改原数组，创建新数组更新状态
   直接修改anchorsImages属于原地修改，React无法感知状态变化。必须生成新数组，保证引用更新：

const changeBead = (bead) => {
  if (indexOfCurrentAnchor === null) return; // 未选中锚点时不执行
  // 复制原数组，修改对应位置后更新状态
  const newAnchors = [...anchorsState];
  newAnchors[indexOfCurrentAnchor] = bead;
  setAnchorsState(newAnchors);
}

2. 用useState保存选中的锚点索引
   用let indexOfCurrentAnchor = null声明的变量，组件每次重渲染都会重置为null，导致选中的锚点索引丢失。改成useState存储：

const [indexOfCurrentAnchor, setIndexOfCurrentAnchor] = useState(null);

const changeAnchor = (index) => {
  setIndexOfCurrentAnchor(index);
}

3. 给列表项设置稳定唯一的key
   用Math.random()生成key，每次渲染key都不一样，React会频繁销毁重建组件，影响性能和更新逻辑。直接用数组索引当key（锚点顺序固定，不会动态增删，索引足够稳定）：

{anchorsState.map((anchor, index) => {
  return <img 
    src={anchor} 
    key={index} 
    className={`anchor anchor${index}`} 
    alt="Jewelry" 
    onClick={()=>{changeAnchor(index)}}
  />
})}

侧边栏的beads列表同理，把key改成索引或bead的唯一标识（比如id）：

{beads.map((bead, index) => {
  return <img 
    src={bead.image} 
    key={index} 
    className='bead' 
    alt="Jewelry" 
    onClick={()=>{changeBead(bead.image)}}
  />
})}

4. 移除冗余的useMemo和useEffect
   anchorsImages是初始化用的静态数组，直接初始化state即可，不需要useMemo；挂载时的useEffect会覆盖state，完全没必要，直接删除：

// 删掉冗余代码
// let anchorsImages = useMemo(() => [...],[])
// useEffect(() => { setAnchorsState(anchorsImages) },[anchorsImages])

// 直接初始化state
const [anchorsState, setAnchorsState] = useState([
  beads[0].image,
  beads[0].image,
  beads[0].image,
  beads[0].image,
  beads[0].image,
  beads[0].image,
  beads[0].image,
  beads[0].image,
  beads[0].image,
  beads[0].image,
  beads[3].image,
]);

完整修改后的核心代码 #

import { useState } from 'react';

// ... 其他变量（beads、mannequin、chain等）

const YourComponent = () => {
  // 初始化锚点图片状态
  const [anchorsState, setAnchorsState] = useState([
    beads[0].image,
    beads[0].image,
    beads[0].image,
    beads[0].image,
    beads[0].image,
    beads[0].image,
    beads[0].image,
    beads[0].image,
    beads[0].image,
    beads[0].image,
    beads[3].image,
  ]);

  // 用useState存选中的锚点索引
  const [indexOfCurrentAnchor, setIndexOfCurrentAnchor] = useState(null);

  const changeBead = (bead) => {
    if (indexOfCurrentAnchor === null) return;
    // 创建新数组修改，保证引用变化
    const newAnchors = [...anchorsState];
    newAnchors[indexOfCurrentAnchor] = bead;
    setAnchorsState(newAnchors);
  };

  const changeAnchor = (index) => {
    setIndexOfCurrentAnchor(index);
  };

  return (
    <div>
      <div className="left">
        {beads.map((bead, index) => {
          return (
            <img
              src={bead.image}
              key={index}
              className="bead"
              alt="Jewelry"
              onClick={() => { changeBead(bead.image) }}
            />
          );
        })}
      </div>
      <div className="middle">
        <img src={mannequin} id='mannequin' className='img' alt="Jewelry" />
        <img src={chain} id="chain" className='img' alt="chain" />
        <div className='anchors'>
          {anchorsState.map((anchor, index) => {
            return (
              <img
                src={anchor}
                key={index}
                className={`anchor anchor${index}`}
                alt="Jewelry"
                onClick={() => { changeAnchor(index) }}
              />
            );
          })}
        </div>
      </div>
    </div>
  );
};

export default YourComponent;

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