Reactjs 在React中的固定间隔后从数组渲染项

我想一个接一个地排列项目。但它只显示数组的最后一个元素

预期输出在2秒后显示“a”和“b”，依此类推

类主扩展React.Component{
建造师（道具）{
超级（道具）
此.state={
角色：[“a”、“b”、“c”]，
显示：“，
}
}
componentDidMount（）{
for（让我离开这个.state.role）{
设置超时（（）=>{
this.setState（{display:i}）
}, 2000)
}
}
render（）{
返回(
{this.state.display}
)
}
}
ReactDOM.render（，document.getElementById（'root'））

---

问题在于您正在使用循环在componentDidMount上创建超时。在这种情况下，将发生的情况是，循环将立即完成创建3个计时器，这些计时器从start和setState以几乎相同的2秒间隔解析，然后对所有三个状态更新调用进行批处理，从而只显示最后一个

为了解决这个问题，您可以使用下面的

setInterval

类主扩展React.Component{
建造师（道具）{
超级（道具）
此.state={
角色：[“a”、“b”、“c”]，
显示：“，
}
}
componentDidMount（）{
var指数=0；
this.timer=setInterval（（）=>{
this.setState（{display:this.state.role[index]}）；
索引=（索引+1）%（this.state.role.length）；
}, 2000)
}
组件willunrunt（）{
clearInterval（这个计时器）；
}
render（）{
返回(
{this.state.display}
)
}
}
ReactDOM.render（，document.getElementById（'root'））
您可以使用多个
索引来创建3个不同的超时


类主扩展React.Component{
建造师（道具）{
超级（道具）
此.state={
角色：[“a”、“b”、“c”]，
显示：“，
}
}
componentDidMount（）{
this.state.role.forEach（（项，索引）=>{
设置超时（（）=>{
this.setState（{display:item}）
}，2000*（指数+1））
})
}
render（）{
返回(
{this.state.display}
)
}
}
ReactDOM.render（，document.getElementById（'root'））
问题在于（x/y）
直接运行，几乎同时创建了所有三个
设置超时，然后您只看到最后一个的结果，因为它们之间有1-2毫秒的差异。
我使用
for（x in y）
作为项目索引。然后，我使用项目索引根据其索引计算其超时。
这是我的方法：


import React, { Component } from "react";

export default class Main extends Component {
  constructor(props) {    super(props);
    this.state = {
      role: ["a", "b", "c"],
      display: ""
    };
  }

  componentDidMount() {
    for (let i in this.state.role) {
      setTimeout(() => {
        this.setState({
          display: this.state.role[i],
        });
      }, 2000 * i);
    }
  }

  render() {
    return (
      <>
        <h3>{this.state.display}</h3>
      </>
    );
  }
}


从“React”导入React，{Component}；
导出默认类主扩展组件{
建造师（道具）{super（道具）；
此.state={
角色：[“a”、“b”、“c”]，
显示：“
};
}
componentDidMount（）{
for（让我进入这个.state.role）{
设置超时（（）=>{
这是我的国家({
显示：this.state.role[i]，
});
}，2000*i）；
}
}
render（）{
返回(
{this.state.display}
);
}
}
您面临什么错误或问题？如果4秒钟后它再次显示
a
，您期望得到什么？您错误地关闭了
componentDidMount
中的括号，尤其是在调用
setState
和
setTimeout
的情况下。尽管我知道您为什么要使用setState（因为它会导致重新渲染），我认为，仅仅出于语义目的，没有必要存储为状态重复的数组。如果您不想在显示时反复重复角色顺序，可以在达到数组大小后清除间隔如果您想使用1个周期的计时器，可以改为使用
setTimeout