React를 사용하고 계시나요? setTimeout을 사용하거나 graphql API의 새 데이터를 몇 분마다 보여주는 데이터 캐 러셀을 만드시겠습니까?

Question

graphql API에서 데이터를 쿼리하여 배열에 저장하면 setTimeout 또는 interval (특정 시간 후에 자동으로 변경되는 데이터 캐 러셀을 상상해보십시오)을 사용하여 표시해야합니다.

Answer 1

는 여기있다 :

this.setState 그것은 때 구성 요소 않은 마운트하여 간격을 취소 할 수 있는지 확인하는 것이 중요합니다 귀하의 질문에

setInterval(() => { 
    call.to.api(data => { 
     this.setState({graphql_data}); 
     // this will update your ui, as soon as state is set 
    }) 
},miliseconds) 

Answer 2

의 열쇠입니다. 그렇지 않으면 "마운트 해제 된"구성 요소에서 상태를 설정하는 방법을 설명하는 오류 메시지 세트로 끝납니다.

import React, { Component } from 'react' 

class Carousel extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      intervalId = 0, 
      updatedProps: {} 
     } 
    } 
    componentDidMount() { 
     let self = this; 
     let id = setInterval(function() { 
      // GRAPHQL => data 
      this.setState({updatedProps: data, intervalId: id}) 
     }) 
    } 
    componentWillUnMount() { 
     clearInterval(this.state.intervalId) 
    } 
    render() { 
     return (
      <div> 
       <Carousel 
        props={this.state.updatedProps} 
       /> 
      </div> 
     ) 
    } 
}