甜警报未显示动态值，我做错了什么？

Question

我已经这样设置了构造函数：

return  cfs.collections + scats + lines # make sure that these are iterable!

从NodeJS到ReactJS的回调函数如下：

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

        }
...

在Sweet Alert 2上，我调用了从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)
...

用户界面中的输出，进度条不起作用，看起来像这样：

控制台中的输出也如下所示：

有解决方案的人吗？

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的准确值