反应条件渲染在一个地方工作，但不在同一组件中的其他地方

Question

我在React中构建了一个自定义音频播放器组件，我根据本指南进行了一些自己的修改/添加。 我遇到的问题是应该在常规音量图标和划掉的音量图标之间切换的MutantToggle按钮没有更新。 从功能上讲，它可以工作，但单击时似乎无法呈现适当的图标。

我对应该做的事情感到困惑，因为据我所知，我正在执行与“播放/暂停”按钮完全相同的过程，该按钮在单击时会更新。

我应该提到的是，该组件是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} />;
}