react-component / react-component/slider

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

Open
#487 3 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
3.1k
Forks
768
Avg merge
11d 22h
Merged PRs (30d)
5

Description

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

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the package.json versions and the minimal LeftSidebar reproduction using rc-slider@8.6.3 and the React/React-DOM ^16.6.0 pair. Reproduce the error by moving the controlled slider, then compare the setup with the linked rc-slider examples; done means moving the slider no longer reports an unmounted component.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.