通过 react-sortable-hoc 对它们进行重新排序（排序）后，React-Select 下拉列表不保留值答案

【问题标题】：React-Select dropdown is not persisting value after reordering(sorting) them by react-sortable-hoc通过 react-sortable-hoc 对它们进行重新排序（排序）后，React-Select 下拉列表不保留值
【发布时间】：2020-03-07 21:43:19
【问题描述】：

我正在尝试创建一个下拉列表，可以通过拖动它们来重新排序。对于拖放，我使用的是 react-sortable-hoc。在这里，我附上了一个工作样本。 Link for sample

要重现此问题，请通过鼠标或键盘在第一个下拉列表中选择值。之后拖动该元素（第一个下拉菜单）并将其放在第 3 或第 4 位置，然后您观察到下降的下拉菜单不会保留该值。在第一个元素处显示的选定值。这可能是什么原因？我该如何解决？

【问题讨论】：

如果对你有帮助请标记答案

标签： react-select react-sortable-hoc

【解决方案1】：

您需要将 onSortEnd 处理程序作为道具传递给您的 srotableContainer

<List items={this.state.items} onSortEnd={this.onSortEnd}/>;

我还建议您在您的项目上添加一个键

<Item key={item} data={item} index={index} />

这是它工作的分叉沙箱： https://codesandbox.io/s/adoring-raman-l72xw?fontsize=14

【讨论】：

我的错，我错过了。但这样做之后我仍然遇到同样的问题。选择并移动它后它在你的最后工作吗？
@Eshu 是的，尝试检查您发布的沙箱是否与添加的处理程序一起使用
我添加了一个分叉的 sanbox，您可以查看
非常感谢您的帮助。我的代码中的问题是我必须在我的项目中传递密钥。但我并不清楚关键的价值应该是什么。它应该是数据或一些唯一的字符串。在这里，我修改了您的代码并传递了插入平面字符串数组的对象。然后我面临同样的问题。请查看codesandbox.io/s/sharp-dewdney-o6wv5
key 可以是任何唯一标识符（不是对象），但是不建议使用 Math.random() 或类似的东西。codesandbox.io/s/epic-fermat-l3d0v 这里是固定版本。请标记答案@Eshu ..您将密钥作为对象传递，这是一个问题，该对象被转换为字符串作为“[object]”，并且您的每个项目都有相同的标识符，这是问题