Progress Bar with react.js

Question

Я пытаюсь реализовать индикатор выполнения, но реакция, похоже, не похожа на идею. Я получаю

Предупреждение: setState (...): Может обновлять только смонтированный или монтажный компонент. Обычно это означает, что вы вызывали setState() на немонтированном компоненте. Это не-op.

как ошибка, хотя элемент установлен во время вызова функции. Вот код:

SocketAction.js

var x = new MainApplication; 
window.socket.on('label-downloads:Shipping\\Events\\ShippingProgress',function(event){ 
    x.showProgress(event); 
}); 

MainApplication.js

showProgress(e){ 
    console.log(window.performance.now()); 
    this.setState({ 
     progressBar:{ 
      height:'4px', 
      background: 'green', 
      position:'absolute', 
      left:250, 
      top: 70, 
      width: e + '%' 
     } 
    }) 
}, 

ProgressBar в MainApplication.js:

<div style={this.state.progressBar}></div> 

установить начальное состояние элемента это

 progressBar:{ 
      height:'4px', 
      background: 'green', 
      width:1, 
      position:'absolute', 
      left:250, 
      top: 70 
     } 

Я не понимаю, почему он не должен быть установлен ...

EDIT:

Это файл, который я прохожу к browserfy:

import MainApplication from './project/MainApplication'; 
import MainSocketActions from './project/MainSocketActions'; 
React.render(<MainApplication />, document.getElementById('content')); 

Полное MainSocketAction.js :

import MainApplication from './MainApplication'; 
var x = new MainApplication; 

    window.socket = io('http://localhost:3000'); 
    window.socket.on('connect', function() { 
    }); 
    window.socket.on('label-downloads:Shipping\\Events\\ShippingProgress',function(event){ 
     x.showProgress(event); 
    }); 

Answer 1

Это:

var x = new MainApplication; 

создает новый MainApplication, но он никогда не визуализируется React. Затем вы создаете еще один (другой), который создается позже. Я думаю, что вы хотите что-то вроде:

var x = React.render(<MainApplication />, document.getElementById('content')); 
window.socket.on('label-downloads:Shipping\\Events\\ShippingProgress',function(event){ 
    x.showProgress(event); 
});