Question

在react-sound中进行状态管理时遇到麻烦。我有一个动态的按钮网格-将鼠标悬停在按钮上时，音频将作为该按钮表示的示例，而当鼠标悬停时，它将停止。现在，当您单击一个按钮，屏幕将另一个数组重新加载为按钮网格时，它会遇到问题-当您执行此操作，然后导航回前一个屏幕时，其行为是REVERSED，因此当您单击鼠标时会播放音频关闭按钮，并在您按下鼠标时停止。我已经尝试了几项我认为应该起作用的方法，包括在单击时触发toggleHoverState（），但到目前为止没有任何结果。有什么建议吗？下面的代码：

class Screen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {displayArray: taxonomyArray,
    isHovering: false};
    this.handleClick = this.handleClick.bind(this);
    this.handleMouseHover = this.handleMouseHover.bind(this);
  }

  handleMouseHover() {
    this.setState(this.toggleHoverState);
  }

  toggleHoverState(state) {
    return {
      isHovering: !state.isHovering,
    };
  }

  handleClick(updatedArray = taxonomyArray) {
    //this.setState(this.toggleHoverState);
    this.setState({
      displayArray: updatedArray,
    });
  }

  render () {
    return (
      this.state.displayArray.map(item =>
        <Col key={Math.random()} span={4} xs="auto" sm="auto" md="auto" lg="auto">
          <a key={Math.random()} data-tip={item.description ? (item.description) : console.log('null description')}>
            { (item.audio && this.state.isHovering) && <div><Sound url={item.audio} playStatus={Sound.status.PLAYING} volume={50}/></div> }
            <Button 
              className='trigger'
              key={Math.random()} 
              variant= {item.child === undefined ? "outline-secondary" : (item.child === null ? "secondary" : "primary") }
              onMouseEnter={this.handleMouseHover}
              onMouseLeave={this.handleMouseHover}
              onClick={ () => ( item.child === null ? console.log('nope') : ( item.child === undefined ? this.handleClick(arrayVisits.pop()) : (arrayVisits.push(this.state.displayArray), this.handleClick(item.child))) ) }
              >
                {item.name}
            </Button>   
          </a>    
          <ReactTooltip className='extraClass' delayHide={0} effect='solid' type="info" multiline={true}/>
          <div>&nbsp;</div>
        </Col>
      )
    );
  }
}

Answer 1

页面实际上是在重新加载，还是BrowserRouter？

听起来，如果它是BrowserRouter，则状态未重置。尝试添加：

componentDidMount () {
  this.setState({isHovering:false})
}

Answer 2

这里的逻辑很奇怪：

  handleMouseHover() {
    this.setState(this.toggleHoverState);
  }

  toggleHoverState(state) {
    return {
      isHovering: !state.isHovering,
    };
  }

为什么不只是写

  handleMouseHover() {
    this.setState({ isHovering: !this.state.isHovering })
  }

但是如果您仍然遇到问题，我会为onMouseEnter和onMouseLeave写一些非常明确的函数以减少混乱：

onMouseEnter={ () => { this.setState( isHovering: true ) } }

onMouseLeave={ () => { this.setState( isHovering: false) } }

让我知道是否可以解决

反应声音状态管理问题

2 个答案: