CODEWITHSUNDEEP
javascriptsocketsreactjs
baao
baao

Reputation: 73271

Progress Bar with react.js

I'm trying to implement a progress bar, but react doesn't seem to like the idea. I get

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op.

as an error, though the element is mounted at the time 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 + '%'
        }
    })
},

ProgressBar is in MainApplication.js:

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

The element's set initial state is this

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

I don't get why it shouldn't be mounted...

EDIT:

This is the file that I pass to browserfy:

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

Complete 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);
    });

Upvotes: 3

Views: 4555

Answers (1)

Austin Greco
Austin Greco

Reputation: 33554

This:

var x = new MainApplication;

is creating a new MainApplication, but it's never rendered by React. Then you're creating another (different) one which is rendered later. I think you want something like:

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

Upvotes: 1

Related Questions