React-sortable-hoc: Report a warning when using props data as items.

[insekkei]

Code:

Component.js:

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

let introModuleList = this.props.introModuleList;

const SortableItem = SortableElement(({value}) => {
return

{this.getCurrentModule(value)}

;
});

const SortableList = SortableContainer(({items}) => {
return (

{items.map((item, index) =>
item-${index}} index={index} value={item} />
)}

);
});

return ;

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

Reducer:

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

arrayMove(initialState.introModuleList, oldIndex, newIndex)

Result:

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.

[insekkei]

https://github.com/insekkei/react-sortable-hoc/commit/5f3fb69a33760c47ef8f059ec650cab1b789b4af

After removethis.setState({...}) the warning disappeared and everything goes well...

[clauderic]

@insekkei would you be able to provide a more complete code sample or share a gist / jsfiddle? It's very hard for me to help you out based only on what you've provided so far, I'd need to see more.

[ekrokowski]

@clauderic The problem here is that when using redux the component may get re-rendered within the onSortEnd Callback. This will unmount the SortableList Component.

Since the onSortEnd Callback is fired before setState is called, the component is already unmounted and the Error 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. will come up.

Is there any reason the provided onSortEnd Callback from props is fired before the setState is used? See here: https://github.com/clauderic/react-sortable-hoc/blob/master/src/SortableContainer/index.js#L307

I think we should simply put that block at the end of the handleSortEnd-Function, just like here (my fork) -> https://github.com/ekrokowski/react-sortable-hoc/blob/51f2c4d3ac763639e66fbd6659cdd8c5fd568cbe/src/SortableContainer/index.js#L302

[sag1v]

i'm having the same issue :/ anyone found the problem or the fix to this?

[ekrokowski]

@sag1v Read my comment..

In the handleSortEnd function -> move this:

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

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

this.setState({
    sorting: false,
    sortingIndex: null
});

Just like in my fork: https://github.com/ekrokowski/react-sortable-hoc/blob/51f2c4d3ac763639e66fbd6659cdd8c5fd568cbe/src/SortableContainer/index.js#L302

[sag1v]

Hmm thanks man, but changing it feels awkward. Why isnt the aithor approve this change? Does it have any side effects?

[microdou]

@ekrokowski
I had the same issue. Thanks for your fix! I tried your fork and it worked for me.
I think you can submit a pull request to the author.

[clauderic]

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