Блог

Я установил конструктор следующим образом:

 ...
constructor(props) 
        {
            super(props);
            this.state = 
            {          
                 progressBarValue: 0
            }

        }
...
  

Функция обратного вызова из NodeJS в ReactJS выглядит следующим образом :

 ...
setTimeout(() => axios.post(BASE_URL   '/timer04')
   .then(res =>
      {  timerGrab = res.data;                                                            
         console.log(`Timer Value 04 :`  timerGrab );                                                            
         var timerLocal = parseInt(timerGrab );                                                            
         this.setState({
              progressBarValue: timerLocal 
             })                                            
         console.log(`Data 04 NEW: `  this.state.progressBarValue);
       })                    
   .catch(err =>                                               
      {                                                            
        console.error('ERROR:', err);
      }),10000)
...
  

В Sweet Alert 2 я вызвал данные, которые передаются из NodeJS в ReactJS.

 ...

let timerInterval
    MySwal.fire(
    {         
        title: 'Processing...',
        html: this.state.progressBarValue  `of 5 <br> <Progress animated value=${this.state.progressBarValue} max={5}/>`,
        timer: 62000,
...
  

Вывод в пользовательском интерфейсе, индикатор выполнения не работает и выглядит так :

Также выходные данные в консоли выглядят следующим образом :

Какие-нибудь решения, ребята?

Как вы могли заметить, поработав с некоторыми реакциями, setState является асинхронным, и поэтому вам будет лучше использовать обратный вызов setState (подробнее об этом вы можете прочитать здесь:https://reactjs.org/docs/react-component.html#setstate). Итак, вместо этого:

 this.setState({
  progressBarValue: timerLocal 
})                                            
console.log(`Data 04 NEW: `  this.state.progressBarValue);
  

Вы должны попробовать это:

 this.setState({
  progressBarValue: timerLocal
}, () => console.log(`Data 04 NEW: ${this.state.progressBarValue}`));
  

Затем он сообщит о точном значении this.state.progressBarValue