Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Report a warning when using props data as items.

See original GitHub issue



import {SortableContainer, SortableElement} from 'react-sortable-hoc';

let introModuleList = this.props.introModuleList;

const SortableItem = SortableElement(({value}) => {
 return <div className="module">
     <Button onClick={() => this.deleteModule(value.moduleOrder)}>删除</Button>

const SortableList = SortableContainer(({items}) => {
 return (
         {, index) =>
             <SortableItem key={`item-${index}`} index={index} value={item} />

return <SortableList items={introModuleList} onSortEnd={this.onSortEnd} />;

onSortEnd = ({oldIndex, newIndex}) => {
   this.props.changeModuleOrder(oldIndex, newIndex);


import {arrayMove} from 'react-sortable-hoc';

arrayMove(initialState.introModuleList, oldIndex, newIndex)


warning.js:45 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. Please check the code for the SortableList component.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:2
  • Comments:8 (2 by maintainers)

github_iconTop GitHub Comments

claudericcommented, Jan 28, 2017

Hey @ekrokowski, thanks for pointing that out. Just shipped 0.4.12 with that change

ekrokowskicommented, Jan 20, 2017

@sag1v Read my comment…

In the handleSortEnd function -> move this:

if (typeof onSortEnd === 'function') {
		oldIndex: this.index,
		newIndex: this.newIndex,
	}, e);

after the setState (or just to the end of the function)

	sorting: false,
	sortingIndex: null

Just like in my fork:

Read more comments on GitHub >

github_iconTop Results From Across the Web

Unknown Prop Warning - React
The unknown-prop warning will fire if you attempt to render a DOM element with a prop that is not recognized by React as...
Read more >
How to validate React props using PropTypes - LogRocket Blog
Learn how to validate props with React PropTypes, React's internal mechanism for adding type checking to component props.
Read more >
Each child in a list should have a unique "key" prop - Stack ...
What causes this error? I'm looking for a definitive list. ... Two elements with same keys will throw the same warning. The warning...
Read more >
About Proposition 65 - OEHHA -
Proposition 65 requires businesses to provide warnings to Californians about ... These chemicals can be in the products that Californians purchase, ...
Read more >
Warning: Each Child in a List Should Have a Unique 'key' Prop
If the key is an index, reordering an item in the array changes it. Then React will get confused and re-render the incorrect...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found