Reactの文字列の配列による無限ループ

Question

プログラミングが初めてで、Reactコンポーネントをレンダリングする際の助けに感謝します。文字列が配列されていて、無限ループで5秒ごとにその配列に各文字列を表示したいと思います。状態を設定しようとしたときに実行しているエラーは 'this.setStateは関数ではありません'です。私は間違ったライフサイクルメソッドを使用していると思う傾向がありますが、バインディングの問題がありますが、私は迷っています。以下はコードです。私は本当にいくつかの助けに感謝します。 setIntervalであなたの関数で

import React, {Component} from 'react'; 

class Home extends Component{ 
    constructor(props){ 
    super(props); 
    this.state = { 
     service: '' 
    } 
    } 
    componentDidMount(){ 
    var services = ['Delivering professional and personalized care to your loved ones','Home visits with a personalized health plan', 'Transition Assistace', 'Advocacy and Guidance', 'Respite Care'] 
    let i=0; 
    setInterval(function(){ 
     console.log('set interval working'); 
     const currentService = services[i]; 
     this.setState({ 
     service: currentService 
     }) 
     i++; 
     if(i>=services.length){ 
     i = 0; 
     } 
    }, 5000); 
    } 
    render(){ 
    console.log('this', this.state.service); 
    return(
     <div className="home"> 
     <div className="profile-img"></div> 
     <div className="mission"> 
      <div className="overlay"> 
      <p>{this.state.service}</p> 
      </div> 
     </div> 
     </div> 
    ) 
    } 
} 
export default Home; 

Answer 1

thisそれが失敗した理由です。.. ComponentWillMountからthisではありません。あなたはあなたがこのキーワードhereについての詳細を読むことができたsetIntervalを呼び出してから、

that.setState() 

前

var that = this; 

：ような何かを行います。