Variable未获取Reactjs中变量的初始值

我正在用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();
          }
        }
      }

类GalleryModal扩展了React.Component{ 建造师（道具）{ 超级（道具）； 此.state={ 轮换：0 }; this.rotate=this.rotate.bind（this）； this.fullScreen=this.fullScreen.bind（this）； } render（）{ const{rotation}=this.state； if（this.props.isOpen==false）{ 返回null； } 返回( ); } 轮换{ 让newRotation=this.state.rotation+90； 如果（新旋转>=360）{ 新旋转=-360； } 这是我的国家({ 旋转：新旋转 }); } 全屏（）{ 让elem=document.getElementById（“图像容器”）； if（元素请求全屏）{ 元素请求全屏（）； }else if（元素mozRequestFullScreen）{ /*火狐*/ elem.mozRequestFullScreen（）； }else if（元素webkitRequestFullscreen）{ /*Chrome、Safari和Opera*/ elem.webkitRequestFullscreen（）； }else if（elem.msRequestFullscreen）{ /*IE/Edge*/ elem.msRequestFullscreen（）； } } }

---

这就是我尝试这样做的原因，但当我单击另一个图像或“下一个/prev”图标时，它会取上一个值，但是

旋转
必须为零，因为我声明
旋转：0
。我不知道旋转误差是从哪里来的，因为我认为我做的是正确的。你能告诉我我做错了什么以及如何解决它吗
 问题是，当您设置具有
旋转：0
的状态时，您正在修改
库
组件的状态；因此，当您打开模型时，
Gallery
组件有自己的
this.state.rotation
变量设置为
0

相反，用于显示图像的旋转是
GalleryModal
组件中的旋转，该组件不再设置为
0

解决方案是将
this.state.rotation
变量从
Gallery
组件传递到
GalleryModal
组件

你的小提琴修好了：

此外，在第61行，不是写：

马特奥做对了。您还可以让模态本身保持旋转，并创建一个close函数，该函数将在调用提供的close函数之前将旋转设置为0。画廊不应该对旋转感兴趣，因为在图像之间保持旋转没有什么价值。
当我单击“下一个”和“上一个”时，旋转的值必须再次为零，但在这里它取的是上一个值。所以我传递了
this.setState（{rotation:0}）。是否有任何标准尽可能少地使用setState？@matteon不确定我是否理解您的意思：如果打开模式，旋转图像，然后转到下一个/上一个图像，您希望下一个/上一个图像的旋转等于0？如果是这样，在第190行和第196行，您需要更改
this.setState（）
函数，以便将旋转设置为
0
。。这边
this.setState（{pointer:newPointer，rotation:0}）我也在编辑JSFIDLE以防万一对不起，你在我回答之前编辑了你的问题。。我的评论确实解决了你的问题，但我不明白你所说的“有没有尽可能少地使用setState的标准？”是什么意思，实际上我的意思是。。。。尽可能少地使用setState函数是否有任何限制。换句话说，多次使用函数setState是一种良好的做法？@matteoWell。。我认为您可以说React是基于该函数的：UI上的每一个更改都应该来自状态的更改（例如，当您悬停一个按钮，其颜色变浅时，应该来自状态的更改，因此是setState调用）。没有“最小值”或“最大值”，因为每次需要更改时都应该调用它（而且，在您的情况下，旋转完全是一种更改，所以它是好的..事实上，您转到“下一个/上一个”图像是一种更改，所以同样是好的）。您只需确保不会进入setState（）循环，否则您的应用程序将崩溃