>

아이템을 차례대로 배열하고 싶습니다. 그러나 배열의 마지막 요소 만 표시합니다.

예상 출력에 2 초 후에 "a"가 표시되고 "b"등이 나타납니다.

class Main extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      role: ["a","b","c"],
      display: "",
    }
  }
  componentDidMount() {
    for (let i of this.state.role) {
      setTimeout(() => {
        this.setState({ display: i})
      }, 2000)
    }
  }
  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>

  • 답변 # 1

    문제는 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"/>
    
    

  • 답변 # 2

    여러 가지 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>
    
    

  • 답변 # 3

    문제는 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>
          </>
        );
      }
    }
    
    

  • 이전 java - 멀티 캐스트로 게시하는 동안 ZeroMQ 323 위에 JZMQ 2xx에서 메모리 누수가 있습니까?
  • 다음 jquery - 레이블을 제거하고 막대 차트의 툴팁에 값만 표시