加法在 Reactjs 中无法正常工作

Question

我是新来的，这里是我的代码，有 3 个按钮重新启动，上一个和下一个。我正在通过数组形式的道具传递一些数据，我需要在幻灯片中显示这些数据。每当我单击下一个元素时，数组中的下一个元素应该被打印，在最后一个元素之后，下一个按钮应该被禁用，在第一个元素之后，上一个按钮应该被禁用。为了实现这一点，我使用 prev 和 next 函数来增加和减少n 中的状态值。我的问题是，每当我按下下一个时，我的数据正在改变，但值保持不变，我很困惑这怎么可能，因为我在显示时也使用了 n 的值。同样，当按上一步时，数据正在改变，但 n 的值没有改变。

import React from "react";

class Slides extends React.Component {
  state = {
    n: 0,
  };

  restart = () => {
    this.setState({
      n: 0,
    });
    document.getElementById("prev").disabled = true;
    document.getElementById("next").disabled = false;
    console.log("restart" + this.state.n);
  };

  preveious = () => {
    let k = this.state.n - 1;
    this.setState({
      n: k,
    });

    if (this.state.n == 0) {
      document.getElementById("prev").disabled = true;
    }
    if (this.state.n < 4) {
      document.getElementById("next").disabled = false;
    }
    console.log("prev" + this.state.n);
  };

  next = () => {
    let k = this.state.n + 1;
    this.setState({
      n: k,
    });

    if (this.state.n == 4) {
      document.getElementById("next").disabled = true;
    }
    if (this.state.n > 0) {
      document.getElementById("prev").disabled = false;
    }
    console.log("next" + this.state.n);
  };

  componentDidMount() {
    if (this.state.n == 0) {
      document.getElementById("prev").disabled = true;
    }
    console.log("comp" + this.state.n);
  }

  render() {
    return (
      <div>
        <div id="navigation" className="text-center">
          <button
            id="restart"
            data-testid="button-restart"
            className="small outlined"
            onClick={this.restart}
          >
            Restart
          </button>
          <button
            id="prev"
            data-testid="button-prev"
            className="small"
            onClick={this.preveious}
          >
            Prev
          </button>
          <button
            id="next"
            data-testid="button-next"
            className="small"
            onClick={this.next}
          >
            Next
          </button>
        </div>
        <div id="slide" className="card text-center">
          <h1 data-testid="title">{this.props.slides[this.state.n].title}</h1>
          <p data-testid="text">{this.props.slides[this.state.n].text}</p>
          {console.log(this.props.slides)}
        </div>
      </div>
    );
  }
}

export default Slides;

谁能帮我解决这个问题？

Answer 1

因此，您可以采取一些措施来避免此处出现渲染问题。首先，您应该避免在 document 上调用任何内容，因为重新渲染会删除您之前针对它的操作。

如果您的所有按钮都尊重状态，那么您可以轻松启用/禁用它们：

class Slides extends React.Component {
  constructor() {
    super();
    this.state = {
      n: 0,
    };
  }

  restart = () => {
    this.setState({
      n: 0,
    });
  };

  previous = () => {
    this.setState({
      n: this.state.n - 1,
    });
  };
 
  next = () => {
    this.setState({
      n: this.state.n + 1,
    });
  };

  render() {
    return (
      <div>
        <div id="navigation" className="text-center">
          <button
            id="restart"
            data-testid="button-restart"
            className="small outlined"
            onClick={this.restart}
          >
            Restart
          </button>
          <button
            id="prev"
            data-testid="button-prev"
            className="small"
            onClick={this.previous}
            disabled={this.state.n === 0}
          >
            Prev
          </button>
          <button
            id="next"
            data-testid="button-next"
            className="small"
            onClick={this.next}
            disabled={this.state.n === this.props.slides.length - 1}
          >
            Next
          </button>
        </div>
        <div id="slide" className="card text-center">
          <h1 data-testid="title">{this.props.slides[this.state.n].title}</h1>
          <p data-testid="text">{this.props.slides[this.state.n].text}</p>
          {console.log(this.props.slides)}
        </div>
      </div>
    );
  }
}

另外，您可以检查 slides 道具的长度属性，而不是硬编码 4 :)

Answer 2

我对您的代码进行了几处逻辑更正，现在它按预期工作。 你可以用这个工作的 codepen 测试自己 - Working Code Link

注意：一件重要的事情是 setState 是异步的，而您可能假设 n 的值会在您调用 setState 时立即更改 n 并且新的递增值将用于比较，但没有发生在你的情况下。

所以我将this.state.n 替换为k。

更新代码 -

class Slides extends React.Component {
  state = {
    n: 0,
  };

  restart = () => {
    this.setState({
      n: 0,
    });
    document.getElementById("prev").disabled = true;
    document.getElementById("next").disabled = false;
    console.log("restart" + this.state.n);
  };

  preveious = () => {
    let k = this.state.n - 1;
    this.setState({
      n: k,
    });
console.log("prev" + " n:" + this.state.n + " k:" + k)
  if (k == 0) {
      document.getElementById("prev").disabled = true;
    }
    if (k < this.props.slides.length) {
      document.getElementById("next").disabled = false;
    }
    
  };

  next = () => {
    let k = this.state.n + 1;
    this.setState({
      n: k,
    });
console.log("next" + " n:" + this.state.n + " k:" + k);
    if (k >= this.props.slides.length-1) {
      document.getElementById("next").disabled = true;
    }
    if (k >= 0) {
      document.getElementById("prev").disabled = false;
    }
    
  };

  componentDidMount() {
    if (this.state.n == 0) {
      document.getElementById("prev").disabled = true;
    }
    console.log("comp" + this.state.n);
  }

  render() {
    return (
      <div>
        <div id="navigation" className="text-center">
          <button
            id="restart"
            data-testid="button-restart"
            className="small outlined"
            onClick={this.restart}
          >
            Restart
          </button>
          <button
            id="prev"
            data-testid="button-prev"
            className="small"
            onClick={this.preveious}
          >
            Prev
          </button>
          <button
            id="next"
            data-testid="button-next"
            className="small"
            onClick={this.next}
          >
            Next
          </button>
        </div>
        <div id="slide" className="card text-center">
          <h1 data-testid="title">{this.props.slides[this.state.n].title}</h1>
          <p data-testid="text">{this.props.slides[this.state.n].text}</p>
          {console.log(this.props.slides)}
        </div>
      </div>
    );
  }
}

Answer 3

你可以使用你的状态

constructor() {
    this.state = {
       n: 0
    };
}

我还建议您将按钮的禁用状态也保留在数组中。尽量不要使用document 对象。