Reactjs react sortable hoc——在没有实验类属性的情况下维护新的排序顺序

以下配置未引发任何错误，但未维护新的排序顺序。拖动和相关动画工作正常，但排序顺序本身不会永久更改

我已经根据上的示例稍微修改了代码。（我将一些代码移到构造函数中，以避免与实验类属性相关的错误。）

有什么想法吗

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

const SortableItem = SortableElement(({value}) => <li>{value}</li>);

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

class SortableComponent extends Component {

    constructor(props) {
        super(props);
        this.state = {};
        this.state.items = [
            "Gold",
            "Crimson",
            "Hotpink",
            "Blueviolet",
            "Cornflowerblue",
            "Skyblue",
            "Lightblue",
            "Aquamarine",
            "Burlywood"
        ];
        this.onSortEnd = this.onSortEnd.bind(this);
    }

    onSortEnd(oldIndex, newIndex) {
        this.setState(({items}) => ({
            items: arrayMove(items, oldIndex, newIndex),
        }));
    }

    render() {
      return <SortableList items={this.state.items} onSortEnd={this.onSortEnd} />;
    }
}

导入{
可分拣集装箱，
可排序元素，
arrayMove，
}来自“react sortable hoc”；
const SortableItem=SortableElement（（{value}）=>
{value}
）；
const SortableList=SortableContainer（（{items}）=>{
返回(

{items.map（（值，索引）=>(
))}

);
});
类SortableComponent扩展了组件{
建造师（道具）{
超级（道具）；
this.state={}；
this.state.items=[
“黄金”，
“深红色”，
“热粉红”，
“蓝紫罗兰”，
“矢车菊蓝”，
“天蓝色”，
“浅蓝色”，
“海蓝宝石”，
“布里伍德”
];
this.onSortEnd=this.onSortEnd.bind（this）；
}
onSortEnd（旧索引、新索引）{
this.setState（（{items}）=>({
项目：arrayMove（项目、旧索引、新索引），
}));
}
render（）{
返回；
}
}

问题出现在onSortEnd回调中：

onSortEnd(oldIndex, newIndex) {
  this.setState(({items}) => ({
    items: arrayMove(items, oldIndex, newIndex),
  }));
}

您需要将函数

（oldIndex，newIndex）

的参数更改为

（{oldIndex，newIndex}）

从github文档（）： onSortEnd—排序结束时调用的回调<代码>函数（{oldIndex，newIndex，collection}，e）

注意函数签名和实现的不同，

oldIndex

和

newIndex

是通过在第一个参数上使用对象分解来分配的。通过使用函数的第二个参数作为

oldIndex

，它实际上将

e

作为值，这显然不能在更新数组顺序时用作索引

非常好--我还通过执行`onSortEnd（args）{let oldIndex=args.oldIndex；let newIndex=args.newIndex`