React条件渲染在一个地方工作，而不是在同一个组件中工作

Question

我正在React中构建一个自定义音频播放器组件，我基于this guide并对我自己进行了一些修改/添加。我遇到的问题是应该在常规卷图标和划掉的卷图标之间切换的muteToggle按钮不会更新。功能上它可以工作，但它似乎没有在单击时呈现适当的图标。

我对我应该做什么很困惑，因为据我所知，我正在使用播放/暂停按钮完全按照相同的过程进行更新。

我应该提一下，这个组件是GatsbyJS中构建的静态站点的一部分。

这是代码（其他一切按预期工作）：

import React from 'react'
import {MdPlayCircleOutline, MdPauseCircleOutline, MdVolumeOff, MdVolumeUp} from "react-icons/lib/md"

import '../styles/audioplayer.css'

export default class AudioPlayer extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      play: false,
      lastVolume: this.volume5,
      isMute: false
    };
  }

  componentDidMount() {
    this.audio.addEventListener("timeupdate", () => {
      let ratio = this.audio.currentTime / this.audio.duration;
      let position = (this.timeline.offsetWidth * ratio) + this.timeline.offsetLeft;
      this.positionHandle(position);
    });
  }

  positionHandle = (position) => {
    let timelineWidth = this.timeline.offsetWidth - this.handle.offsetWidth;
    let handleLeft = position - this.timeline.offsetLeft;
    if (handleLeft >= 0 && handleLeft <= timelineWidth) {
      this.handle.style.marginLeft = handleLeft + "px";
      this.played.style.width = handleLeft + "px";
    }
    if (handleLeft < 0) {
      this.handle.style.marginLeft = "0px";
      this.played.style.width = "0px";
    }
    if (handleLeft > timelineWidth) {
      this.handle.style.marginLeft = timelineWidth + "px";
      this.played.style.width = timelineWidth + "px";
    }
  }

  mouseMove = (e) => {
    this.positionHandle(e.pageX);
    this.audio.currentTime = ((e.pageX - this.timeline.offsetLeft) / this.timeline.offsetWidth) * this.audio.duration;
  }

  mouseUp = (e) => {
    window.removeEventListener('mousemove', this.mouseMove);
    window.removeEventListener('mouseup', this.mouseUp);
  }

  mouseDown = (e) => {
    window.addEventListener('mousemove', this.mouseMove);
    window.addEventListener('mouseup', this.mouseUp);
  }

  play = () => {
    if (this.state.play) {
      this.setState({ play: false });
      this.audio.pause();
    } else {
      this.setState({ play: true });
      this.audio.play();
    }
  }

  mute = () => {
    if (!this.state.isMute) {
      this.audio.volume = 0;
      this.setState({ isMute: true });
      this.volBlock1.style.background = "#a4a4a4";
      this.volBlock2.style.background = "#a4a4a4";
      this.volBlock3.style.background = "#a4a4a4";
      this.volBlock4.style.background = "#a4a4a4";
      this.volBlock5.style.background = "#a4a4a4";
      console.log("isMute: ", this.state.isMute);
    } else {
      this.setState({ isMute: false });
      this.state.lastVolume();
      console.log("isMute: ", this.state.isMute);
    }
  }

  volume1 = () => {
    this.audio.volume = 0.2;
    this.setState({ lastVolume: this.volume1 });
    this.volBlock1.style.background = "#000000";
    this.volBlock2.style.background = "#a4a4a4";
    this.volBlock3.style.background = "#a4a4a4";
    this.volBlock4.style.background = "#a4a4a4";
    this.volBlock5.style.background = "#a4a4a4";
  }

  volume2 = () => {
    this.audio.volume = 0.4;
    this.setState({ lastVolume: this.volume2 });
    this.volBlock1.style.background = "#000000";
    this.volBlock2.style.background = "#000000";
    this.volBlock3.style.background = "#a4a4a4";
    this.volBlock4.style.background = "#a4a4a4";
    this.volBlock5.style.background = "#a4a4a4";
  }

  volume3 = () => {
    this.audio.volume = 0.6;
    this.setState({ lastVolume: this.volume3 });
    this.volBlock1.style.background = "#000000";
    this.volBlock2.style.background = "#000000";
    this.volBlock3.style.background = "#000000";
    this.volBlock4.style.background = "#a4a4a4";
    this.volBlock5.style.background = "#a4a4a4";
  }

  volume4 = () => {
    this.audio.volume = 0.8;
    this.setState({ lastVolume: this.volume4 });
    this.volBlock1.style.background = "#000000";
    this.volBlock2.style.background = "#000000";
    this.volBlock3.style.background = "#000000";
    this.volBlock4.style.background = "#000000";
    this.volBlock5.style.background = "#a4a4a4";
  }

  volume5 = () => {
    this.audio.volume = 1;
    this.setState({ lastVolume: this.volume5 });
    this.volBlock1.style.background = "#000000";
    this.volBlock2.style.background = "#000000";
    this.volBlock3.style.background = "#000000";
    this.volBlock4.style.background = "#000000";
    this.volBlock5.style.background = "#000000";
  }

  render() {
    let playButton = null;
    if (!this.state.play) {
      playButton = <MdPlayCircleOutline className="pButton" onClick={this.play} />
    } else {
      playButton= <MdPauseCircleOutline className="pButton" onClick={this.play} />
    }

    let muteToggle = null;
    if(!this.state.isMuted) {
      muteToggle = <MdVolumeUp onClick={this.mute} />;
    } else {
      muteToggle = <MdVolumeOff onClick={this.mute} />;
    }

    return(
      <div id="audioplayer">
        <audio id="music" ref={(audio) => { this.audio = audio } } controls>
          <source src={this.props.audio} />
        </audio>
        {playButton}
        <div id="timeline" onClick={this.mouseMove} ref={(timeline) => { this.timeline = timeline }}>
          <div id="played" ref={(played) => {this.played = played}} />
          <div id="handle" onMouseDown={this.mouseDown} ref={(handle) => { this.handle = handle }} />
        </div>
        <div className="volume-container">
          {muteToggle}
          <div className="volume-item" onClick={this.volume1} >
            <div className="volume-block" ref={(volBlock1) => {this.volBlock1 = volBlock1}} />
          </div>
          <div className="volume-item" onClick={this.volume2} >
            <div className="volume-block" ref={(volBlock2) => {this.volBlock2 = volBlock2}} />
          </div>
          <div className="volume-item" onClick={this.volume3} >
            <div className="volume-block" ref={(volBlock3) => {this.volBlock3 = volBlock3}} />
          </div>
          <div className="volume-item" onClick={this.volume4} >
            <div className="volume-block" ref={(volBlock4) => {this.volBlock4 = volBlock4}} />
          </div>
          <div className="volume-item" onClick={this.volume5} >
            <div className="volume-block" ref={(volBlock5) => {this.volBlock5 = volBlock5}} />
          </div>
        </div>
      </div>
    )
  }
}

当然，如果你看到我的代码可能被重构或改进的任何其他地方，我愿意接受建议。

Answer 1

使用isMute字段而不是isMuted

let muteToggle = null;
if(!this.state.isMute) {
  muteToggle = <MdVolumeUp onClick={this.mute} />;
} else {
  muteToggle = <MdVolumeOff onClick={this.mute} />;
}