添加在 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

您可以将您的状态用作

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

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

Answer 2

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

如果您的所有按钮都遵循状态，那么您可以轻松 enable/disable 它们：

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

此外，您可以检查幻灯片道具的长度属性而不是硬编码 4 :)

Answer 3

我对您的代码进行了一些逻辑更正，现在它可以正常工作了。你可以用这个工作代码笔测试你自己 - Working Code Link

注意：一件重要的事情是 setState 是异步的，而您可能假设 n 的值会在您对 n 调用 setState 时立即更改，并且将使用新的增量值用于比较，这在您的案例中没有发生。

所以我用 k 替换了 this.state.n。

更新代码 -

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

添加在 Reactjs 中无法正常工作

Addition is not working properly in Reactjs

html

javascript

arrays

dom-events

reactjs