我正在用 reactjs 制作一个图像查看器。实际上我希望当用户单击旋转图标时图像旋转约 90 度。一切都进展顺利，但主要问题是当我点击任何图像并旋转它并关闭它之后，如果我打开其他它会采用以前的旋转值，但在我初始化时它必须为零。

class GalleryModal extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            rotation: 0
          };
          this.rotate = this.rotate.bind(this);
          this.fullScreen = this.fullScreen.bind(this);
        }

        render() {
          const { rotation } = this.state;
          if (this.props.isOpen === false) {
            return null;
          }

          return (
            <div className="modal-overlay" name={this.props.name}>
              <div className="modal-body" id="image_container">

                <img
                  className="center_image"
                  id="image"
                  src={this.props.src}
                  style={{ transform: `rotate(${rotation}deg)` }}
                />
                <a href="#" className="fullscreen button" onClick={this.fullScreen}>
                    <i className="fas fa-compress-arrows-alt"></i>
                </a>
                <a href="#" className="button" onClick={() => this.rotate()}>
                  <i className="fas fa-sync-alt" />
                </a>
                <a href="#" className="button" onClick={this.props.onPrev}>
                  <i className="fas fa-angle-left" />
                </a>
                <a href="#" className="button" onClick={this.props.onNext}>
                  <i className="fas fa-angle-right" />
                </a>
                <a
                  className="modal-close"
                  href="#"
                  onClick={this.props.onClick}
                >
                  <span className="fa fa-times" />
                </a>

              </div>
            </div>
          );
        }
        rotate() {
          let newRotation = this.state.rotation + 90;
          if (newRotation >= 360) {
            newRotation = -360;
          }
          this.setState({
            rotation: newRotation
          });
        }

        fullScreen() {
          let elem = document.getElementById("image_container");
          if (elem.requestFullscreen) {
            elem.requestFullscreen();
          } else if (elem.mozRequestFullScreen) {
            /* Firefox */
            elem.mozRequestFullScreen();
          } else if (elem.webkitRequestFullscreen) {
            /* Chrome, Safari & Opera */
            elem.webkitRequestFullscreen();
          } else if (elem.msRequestFullscreen) {
            /* IE/Edge */
            elem.msRequestFullscreen();
          }
        }
      }

Demo here这是我尝试这样做的目的，但是当我单击另一个图像或下一个/上一个图标时，它会采用前一个值，但rotation在我声明时必须为零rotation:0。我不知道旋转错误是从哪里出现的，因为我认为我做对了。你能告诉我我做错了什么以及如何解决吗？？？？