Progress bar with reaction.
I'm trying to implement a progress bar but the reaction doesn't seem to sound like the idea. I get
Warning: setState (...): Can only update mounted or mounted component. This usually means that you called setState () on an unmounted component. This is a non-op.
as an error, although the element is being set when the function is called. Here's the code:
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 + '%'
}
})
},
The ProgressBar is in MainApplication.js:
<div style={this.state.progressBar}></div>
The initial state of the stencil is
progressBar:{
height:'4px',
background: 'green',
width:1,
position:'absolute',
left:250,
top: 70
}
I don't understand why it shouldn't be mounted ...
EDIT:
This is the file I am passing to browserfy:
import MainApplication from './project/MainApplication';
import MainSocketActions from './project/MainSocketActions';
React.render(<MainApplication />, document.getElementById('content'));
End 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);
});
source to share
It:
var x = new MainApplication;
creates a new one MainApplication
, but it never shows up in React. Then you create another one (another) which is created later. I think you need something like:
var x = React.render(<MainApplication />, document.getElementById('content'));
window.socket.on('label-downloads:Shipping\\Events\\ShippingProgress',function(event){
x.showProgress(event);
});
source to share