Report a warning when using props data as items.

Code:

Component.js:

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>
     <div>
         {this.getCurrentModule(value)}
     </div>
 </div>;
});

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

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

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

Reducer:

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.

[clauderic]

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

[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