变量没有采用 Reactjs 中变量的初始值答案

【问题标题】：Variable is not taking the initial value of a variable in Reactjs变量没有采用 Reactjs 中变量的初始值
【发布时间】：2019-02-18 22:45:10
【问题描述】：

我正在 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 。我不知道旋转错误是从哪里引起的，因为我认为我做对了。你能告诉我我做错了什么以及如何解决吗？？？？

【问题讨论】：

标签： reactjs

【解决方案1】：

问题在于，当您设置具有rotation: 0 的状态时，您正在修改Gallery 组件的状态；因此，当您打开模型时，Gallery 组件将其自己的this.state.rotation 变量设置为0。

相反，用于显示图像的旋转是GalleryModal 组件中的旋转，它永远不会再次设置为0。

一种解决方案是将this.state.rotation 变量从Gallery 组件传递给GalleryModal 组件。

你的小提琴已经修好了：https://jsfiddle.net/3hywna07/

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

<a href="#" className="button" onClick={() => this.props.rotate()}>

只写：

<a href="#" className="button" onClick={this.props.rotate}>

应避免在render() 方法中使用箭头函数，因为这会导致每次执行render() 方法时都创建函数。

更新链接：-https://jsfiddle.net/c0qpk5wv/2/

【讨论】：

当我单击下一个和上一个时，旋转的值必须再次为零，但在此它采用前一个值。所以我通过了 this.setState({ rotation: 0 }); 。有没有尽可能少使用 setState 的标准？@matteo
不确定我是否理解您的意思：如果您打开模式，旋转图像，而不是转到下一张/上一张图像，您希望下一张/上一张图像的旋转等于 0 ?如果是这样，在第 190 和 196 行，您需要更改 this.setState() 函数，以便将旋转设置为 0.. 这样！ this.setState({ pointer: newPointer, rotation: 0 }); 我也在编辑 JSFiddle 以防万一
抱歉，您在我回答之前编辑了您的问题。我的评论确实解决了您的问题，但我不明白您的意思是“是否有任何标准尽可能地使用 setState ?”
其实我的意思是.... 是否有任何限制尽可能少地使用 setState 函数。换句话说，多次使用函数 setState 是一个好习惯？@matteo
嗯.. 我想你可以说 React 是基于那个功能的：UI 上的每一个变化都应该来自状态的变化（例如，当你悬停一个按钮并且它的颜色变浅时，这应该来自状态的变化，因此是 setState 调用）。没有“最小”或“最大”，因为您应该在每次需要更改时调用它（并且，在您的情况下，轮换完全是一个更改，所以这很好..事实上您转到“下一个” /previous" 图像是一个变化，所以再次很好）。你只要确保你没有进入 setState() 循环，否则你的应用程序会崩溃

【解决方案2】：

Matteo 做对了。您还可以让模态本身保持旋转并创建一个关闭函数，该函数将在调用提供的关闭函数之前将旋转设置为 0。图库不应该对旋转感兴趣，因为保持图像之间的旋转几乎没有价值。

【讨论】：