react-component / slider

React Slider
https://slider.react-component.now.sh/
MIT License
3.03k stars 766 forks source link

Uncaught Error: Unable to find node on an unmounted component. #487

Open Frikster opened 5 years ago

Frikster commented 5 years ago

React and React-DOM versions are both^16.6.0. (according to my package.json) I am well aware that this error message often arises due to React/React-DOM version mismatches but that doesn't seem to be the case here?

I have a blue/red slider I modified from the rc-slider@8.6.3 examples.

The slider is inserted into my react component, however I if I try to move it I get Uncaught Error: Unable to find node on an unmounted component.

I've cut out my code and built a bare component with the slider. It still renders perfectly but still produces the same error when you try to move it:

class LeftSidebar extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            malePercentage: 50
        };
        this.onSliderChange = this.onSliderChange.bind(this);
    }

    onSliderChange(value) {
        this.setState({ malePercentage: value })
    }

    render() {
        return (
            <div>
                <Slider
                    min={0} max={100}
                    defaultValue={50}
                    trackStyle={{ backgroundColor: 'blue', height: 10 }}
                    handleStyle={{
                        borderColor: 'green',
                        height: 28,
                        width: 28,
                        marginLeft: -14,
                        marginTop: -9,
                        backgroundColor: '#00bc66',
                    }}
                    railStyle={{ backgroundColor: 'red', height: 10 }}
                    value={this.state.malePercentage}
                    tipFormatter={value => `${value / 10}:${(100 - value) / 10}`} //display M:F ratio
                    onChange={value => this.onSliderChange(value)}
                />
            </div>
        );
    }
}

export default LeftSidebar;

Am I missing something trivial? I've lost track of how many desperate nonsensical little changes I've made to try and make it work

brendanscarano commented 5 years ago

Experiencing the same issue - curious if anyone has found a solution?

bietkul commented 5 years ago

Created a PR #494 to fix it.

bietkul commented 5 years ago

Can you guys fix it or just merge the PR? I'm getting this issue while using marks.