点击按钮后React组件未更新重渲染的问题求助

你现在的问题出在直接把React元素存在state里，而且ReactCodepen组件可能没有监听props变化来重新加载对应的Codepen内容。React的最佳实践是把状态数据（比如这里的索引值）存在state，而不是直接存渲染好的元素。

修复步骤： #

1. 把state改为存储索引值，而非存储React元素
2. 根据索引值动态渲染组件，确保状态变化时重新计算要渲染的内容
3. 给每个ReactCodepen组件添加唯一key，让React能准确识别组件实例的变化，避免复用旧组件

修复后的完整代码： #

const PageNotFound: React.FC = () => {
  const [activeIndex, setActiveIndex] = useState(1);

  function renderCodePen(index: number){
    switch (index) {
      case 1:
        return <ReactCodepen 
          key={1}
          user="MichaelKhalifar" 
          hash="JjZYENK" 
          height={700}  
          loader={() => <div>Loading...</div>} 
          themeId="31205" 
        /> 
      case 2:
        return <ReactCodepen 
          key={2}
          user="saifkeralite" 
          hash="GRGyKEz" 
          height={700}  
          loader={() => <div>Loading...</div>} 
          themeId="31205" 
        /> 
      case 3:
        return <ReactCodepen 
          key={3}
          user="saifkeralite" 
          hash="yLBQaaY" 
          height={700}  
          loader={() => <div>Loading...</div>} 
          themeId="31205" 
        /> 
      default:
        return <ReactCodepen 
          key="default"
          user="saifkeralite" 
          hash="yLBQaaY" 
          height={700}  
          loader={() => <div>Loading...</div>} 
          themeId="31205" 
        />
    }
  }

  return (
    <div className={styles.mainContainer}>
      {renderCodePen(activeIndex)}
      <button onClick={() => setActiveIndex(1)}>1</button>
      <button onClick={() => setActiveIndex(2)}>2</button>
      <button onClick={() => setActiveIndex(3)}>3</button>
    </div>
  );
};

为什么这样能解决问题？ #

• 存储索引而非元素，每次点击更新的是简单数值状态，React能准确触发重新渲染
• 添加key属性后，React会把不同索引对应的ReactCodepen视为独立组件实例，切换时会卸载旧组件并挂载新组件，确保Codepen嵌入内容完全更新
• 这种写法更符合React状态管理逻辑：状态只存数据，渲染逻辑由数据驱动

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