React幻灯片开发：如何防止组件状态传递污染后续组件

这个跨句子状态串扰问题是React组件复用机制+列表key使用错误共同导致的：

• 切换幻灯片时，React不会销毁重建同位置的ProblemComponent组件，只会更新它接收的word属性。你在ProblemComponentController中给单词项设置的key是单词在单句内的索引i，每一页第一个单词的key永远是0，React会判定这是同一个组件实例，不会重置内部的isHighlighted状态。
• 举个实际运行逻辑：第一页第一个单词key=0，点击高亮后内部state变为true；切到第二页时，第一个单词的key还是0，React直接复用之前的组件实例，仅把传入的word属性替换成第二页的单词，内部的高亮状态被完整保留，就出现了跨句默认高亮的异常。

两种方案任选其一即可，推荐优先选方案1，符合React列表渲染规范：

方案1：设置全局唯一的单词key（最小改动） #

不要用单词在单句内的索引当key，把当前句子的索引和单词索引拼接，保证每个句子的每个单词key全局唯一。切换句子时React会识别到key变化，自动销毁旧组件实例、创建新实例，重置内部高亮状态。
首先修改Slideshow组件，把当前页码传给句子控制器：

function Slideshow(props: { sentences: string[]; }) {
  const [currentSlideIndex, setCurrentSlideIndex] = useState(0);

  if (currentSlideIndex >= props.sentences.length) {
    return <div>Over.</div>;
  }

  return (
    <div>
      <ProblemComponentController
        sentence={props.sentences[currentSlideIndex]}
        slideIndex={currentSlideIndex} // 新增传入当前句子索引
      />
      <button onClick={() => setCurrentSlideIndex(currentSlideIndex + 1)}>
        Next
      </button>
    </div>
  );
}

再修改ProblemComponentController的key生成规则：

function ProblemComponentController(props: { sentence: string; slideIndex: number }) {
  const words = props.sentence.split(' ');

  return (
    <p>
      {words.map((w, i) => (
        <span key={`${props.slideIndex}-${i}`}> {/* 拼接句子+单词索引生成唯一key */}
          <ProblemComponent word={w} />{' '}
        </span>
      ))}
    </p>
  );
}

方案2：给整句组件绑定key强制重置 #

直接给ProblemComponentController绑定当前句子索引为key，切换句子时整个句子组件会完全重建，内部所有单词组件的状态自然全部重置，不需要修改单词项的key：

function Slideshow(props: { sentences: string[]; }) {
  const [currentSlideIndex, setCurrentSlideIndex] = useState(0);

  if (currentSlideIndex >= props.sentences.length) {
    return <div>Over.</div>;
  }

  return (
    <div>
      <ProblemComponentController
        key={currentSlideIndex} {/* 新增：整句绑定句子索引为key */}
        sentence={props.sentences[currentSlideIndex]}
      />
      <button onClick={() => setCurrentSlideIndex(currentSlideIndex + 1)}>
        Next
      </button>
    </div>
  );
}

注意：不要用数组索引作为动态列表的key是React开发的基础规范，尤其是列表项带有内部状态、存在增删/替换场景时，索引作为key大概率会引发状态串扰问题。

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