Javascript 加法在Reactjs中无法正常工作

我是新手，这里是我的代码，有3个按钮重新启动，上一个和下一个。我正在通过阵列形式的道具传递一些数据，我需要在幻灯片中显示这些数据。每当我单击next时，数组中的下一个元素应该被打印，在最后一个元素之后，next按钮应该被禁用，在第一个元素之后，previous按钮应该被禁用。为了实现这一点，我使用了prev和next函数，其中我增加和减少了

n

中的state值。我的问题是，每当我按下“下一步”时，我的数据都在变化，但值保持不变，我很困惑这是怎么可能的，因为我在显示时也使用了n的值。同样，在按下“上一步”时，数据正在更改，但

n

的值没有更改

从“React”导入React；
类扩展了React.Component{
状态={
n:0，
};
重新启动=（）=>{
这是我的国家({
n:0，
});
document.getElementById（“prev”）.disabled=true；
document.getElementById（“next”）.disabled=false；
log（“重新启动”+此.state.n）；
};
先前=（）=>{
设k=this.state.n-1；
这是我的国家({
n:k，
});
if（this.state.n==0）{
document.getElementById（“prev”）.disabled=true；
}
如果（该状态n<4）{
document.getElementById（“next”）.disabled=false；
}
console.log（“prev”+this.state.n）；
};
下一步=（）=>{
设k=this.state.n+1；
这是我的国家({
n:k，
});
if（this.state.n==4）{
document.getElementById（“next”）.disabled=true；
}
如果（此.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（）{
返回(
重新启动
上
下一个
{this.props.slides[this.state.n].title}
{this.props.slides[this.state.n].text}
{console.log（this.props.slides）}
);
}
}
导出默认幻灯片；

---

有人能帮我吗？

你可以使用你的州作为

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

---

此外，我建议您将按钮的禁用状态也保留在数组中。尽量不要使用

文档

对象。

因此，这里有一些可以避免渲染问题的方法。首先，您应该避免调用

文档上的任何内容，因为重新加载程序将删除您以前对其执行的操作

如果您的所有按钮都符合该状态，则可以轻松启用/禁用它们：

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

类幻灯片扩展了React.Component{
构造函数（）{
超级（）；
此.state={
n:0，
};
}
重新启动=（）=>{
这是我的国家({
n:0，
});
};
先前=（）=>{
这是我的国家({
n:这个州，n-1，
});
};
下一步=（）=>{
这是我的国家({
n:这个州，n+1，
});
};
render（）{
返回(
重新启动
上
下一个
{this.props.slides[this.state.n].title}
{this.props.slides[this.state.n].text}
{console.log（this.props.slides）}
);
}
}

另外，您可以检查幻灯片道具的长度属性，而不是硬编码4:）
我已经对您的代码进行了一些逻辑更正，现在它可以正常工作了。
您可以使用此工作代码笔测试自己-

注意：重要的一点是，
setState
是异步的，而您可能假设在调用n上的
setState
时，n的值将立即改变，并且新增加的值将用于在您的情况下没有发生的比较

所以我用
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>
    );
  }
}

类幻灯片扩展了React.Component{
状态={
n:0，
};
重新启动=（）=>{
这是我的国家({
n:0，
});
document.getElementById（“prev”）.disabled=true；
document.getElementById（“next”）.disabled=false；
log（“重新启动”+此.state.n）；
};
先前=（）=>{
设k=this.state.n-1；
这是我的国家({
n:k，
});
console.log（“prev”+“n:”+this.state.n+“k:”+k）
如果（k==0）{
document.getElementById（“prev”）.disabled=true；
}
if（k{
设k=this.state.n+1；
这是我的国家({
n:k，
});
log（“下一个”+“n:+this.state.n+“k:+k”）；
如果（k>=此.props.slides.length-1）{
document.getElementById（“next”）.disabled=true；
}
如果（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（）{
返回(
重新启动
上
下一个
{this.props.slides[this.state.n].title}
{this.props.slides[this.state.n].text}
{console.log（this.props.slides）}
);
}
}