javascript - Sweet Alert没有显示动态值，我做错了什么？

Question

我设置了这样的构造函数:

...
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,
...

用户界面中的输出，进度条不起作用，如下所示:

控制台中的输出如下所示:

各位有什么解决办法吗？

Answer 1

正如您可能已经注意到使用过一些 React - 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 的准确值