reactjs - React에서 고정 간격 후에 배열에서 항목 렌더링

문제는 componentDidMount에서 타임 아웃을 만들기 위해 루프를 사용하고 있다는 것입니다. 이러한 경우 루프가 시작 및 setState에서 거의 동일한 2 초 간격으로 해결되는 3 개의 타이머를 즉시 생성하여 완료 한 후 3 개의 상태 업데이트 호출을 모두 일괄 처리하여 마지막으로 만 표시되도록합니다.

이 문제를 해결하기 위해 setInterval 를 사용할 수 있습니다  아래처럼

class Main extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      role: ["a","b","c"],
      display: "",
    }
  }
  componentDidMount() {
    var index = 0;
    this.timer = setInterval(() => {
      this.setState({ display: this.state.role[index]});
      index  = (index + 1)%(this.state.role.length);
    }, 2000)
  }
  componentWillUnmounnt() {
    clearInterval(this.timer);
  }
  render() {
    return (
      <React.Fragment>
          <h3>{this.state.display}</h3>
      </React.Fragment>
    )
  }
}
ReactDOM.render(<Main />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"/>

여러 가지 index 를 사용할 수 있습니다  3 가지 타임 아웃을 만들 수 있습니다.

class Main extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      role: ["a","b","c"],
      display: "",
    }
  }
  componentDidMount() {
    this.state.role.forEach((item, index) => {
      setTimeout(() => {
        this.setState({ display: item})
      }, 2000*(index+1))
    })
  }
  render() {
    return (
      <div>
          <h3>{this.state.display}</h3>
      </div>
    )
  }
}
ReactDOM.render(<Main />, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='root'></div>

문제는 for (x of y)  직접 실행하고 세 개의 setTimeouts  거의 한 번에 생성 된 경우 마지막 1-2 가지 차이가 ​​1-2ms 차이가 나는 원인 만 나타납니다. 나는 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>
      </>
    );
  }
}