javascript - React-Sound 状态管理问题

Question

react-sound 中的状态管理存在一些问题。我有一个动态按钮网格 - 当鼠标悬停在按钮上时，音频会作为该按钮代表的示例播放，而当鼠标移开时，它会停止。现在，当您单击一个按钮并且屏幕重新加载另一个数组作为按钮网格时，它会遇到问题 - 当您这样做然后导航回前一个屏幕时，行为会反转，因此当您鼠标移动时会播放音频关闭按钮并在鼠标打开时停止。我已经尝试了一些我认为应该有效的方法，包括在单击时触发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

这里的逻辑很奇怪:

  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) } }

如果解决了请告诉我