如何使用带有 componentDidUpdate 和 setState 的 react js 更新 state？

Question

How to update the data with react js eg a user writes a comment how to make this messages show up to all other users? I used setState in componentDidUpdate with a stop condition but it doesn't work. If i don't make a condition, it work correctely but with infinite loop.

componentDidUpdate(prevProps, prevState) { 
console.log("1" + prevState.changeRepComm.toString())
console.log("2" + this.state.changeRepComm.toString())
 if (prevState.changeRepComm !== this.state.changeRepComm ) {
  if (this.updateTimer) return;     
      this.updateTimer = setTimeout(() => {
      //lister response comments
     fetch('/api/ReponseCommentaire/listerReponseCommentaire', {
      method: "GET",
      headers: {
        'Accept': 'application/json, application/xml, text/plain, text/html, *.*',
        'Content-Type': 'application/json'
      }
    })
      .then(response => response.json())
      .then(response => {
        console.log('Ajouter response:' + JSON.stringify(response))
        this.setState({ ...this.state, reponseCommentaires: response });
      })
      .catch((err) => {
        console.log('fetch failed => ', err);
      })

  }, 1000);

} }

Answer 1

If your looking to update every second, you can initialize a timer when component mounts.

componentDidMount(prevProps, prevState) { 
    if (this.updateTimer) { return; }  

    this.updateTimer = setInterval(() => {
      fetch('/api/ReponseCommentaire/listerReponseCommentaire', {
        method: "GET",
        headers: {
          'Accept': 'application/json, application/xml, text/plain, text/html, *.*',
          'Content-Type': 'application/json'
        }
      })
      .then(response => response.json())
      .then(response => {
        this.setState({
          ...this.state,
          reponseCommentaires: response,
        });
      })
      .catch((err) => console.log('fetch failed => ', err) )

    }, 1000);
}