React状态变更时条件渲染不更新？按钮图标切换失效求助

你直接修改类实例的this.isPlaying属性，但React类组件只有通过setState更新状态才会触发组件重新渲染，这就是按钮图标不切换的核心原因。

修改步骤： #

1. 初始化组件状态
   在组件中通过state管理isPlaying，可选择构造函数初始化或类属性语法：

   // 构造函数方式
   constructor(props) {
     super(props);
     this.state = {
       isPlaying: false
     };
   }
   
   // 或类属性语法（需babel支持）
   state = {
     isPlaying: false
   };
   

2. 用setState更新状态
   修改onPlayButtonClicked方法，通过setState更新状态，使用函数式更新确保拿到最新状态值：

   onPlayButtonClicked = () => {
     this.setState(prevState => {
       if (!prevState.isPlaying) {
         this.start(0, Math.round(this.currentTime - 0.5));
         return { isPlaying: true };
       } else {
         this.stop();
         return { isPlaying: false };
       }
     });
   }
   

3. 渲染时引用状态
   将按钮中的this.isPlaying替换为this.state.isPlaying：

   <button id="playButton" onClick={this.onPlayButtonClicked} className="bg-green-500 p-2 px-4 text-white rounded shadow">
   { this.state.isPlaying ?
       <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg> :
       <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
   }
   </button>
   

原理说明： #

React类组件依赖setState追踪状态变化，调用setState后，React会标记组件需要重新渲染，并在合适时机更新DOM。直接修改实例属性不会触发React的更新机制，因此UI无法同步变化。

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