react-component / react-component/slider
Uncaught Error: Unable to find node on an unmounted component.
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
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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