任何人都可以建议将 React 拖放列表与来自 Redux 的动态值集成的最佳方式吗？

Question

我需要可排序的拖/放组件，以便能够在用户从另一个容器单击按钮时使用新值重新渲染，并且仍然保留拖/放功能。 例如，如果列表首先包含 [a, b, c]，我需要它在用户单击将列表重新呈现为 [d, e, f, g] 的按钮时仍然有效。

我在react-sortable-hoc 、 react-beautiful-dnd和其他一些问题上遇到了同样的问题。 所有这些库都使用一个数组来填充它们的拖放列表组件，在基本示例中通常命名为this.state.items 。 他们使用一个名为onSortEnd的函数来处理项目的重新排列。 react-sortable-hoc 的基本代码示例包括我在 render() 中的更新 this.state.items 如下：

import React, {Component} from 'react';
import {render} from 'react-dom';
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 SelectedItem extends Component {
  state = {
    items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
  };
  onSortEnd = ({oldIndex, newIndex}) => {
    this.setState({
      items: arrayMove(this.state.items, oldIndex, newIndex),
    });
  };
  render() {

// MY CODE ADDITIONS!! THIS IS WHERE THE LIST ITEM GETS UPDATED.

    this.state.items = [this.props.selectedItem.node.title,
                this.props.selectedItem.node.subtitle,
                this.props.selectedItem.treeIndex]; 

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

function mapStateToProps(state)
{
    return {
        selectedItem: state.activeItem
    };
}

export default connect(mapStateToProps)(SelectedItem);

一开始拖/放一切正常。 但是，如果我在render()更改items[]的值，则新列表会正确呈现。 但是拖放失败。 拖拽的时候好像能用； 所选元素移动，目标位置看起来会接受它，但 onMouseRelease 一切都会恢复原状。

我在数组移动后放置了 console.log 命令，以确认items中的列表已根据需要重新排序。 它只是在视觉上不会发生。 拖放时没有控制台错误。

任何帮助，将不胜感激。

Answer 1

我通过利用getDerivedStateFromProps生命周期方法更新项目状态解决了这个问题。

Answer 2

我只是通过将 Draggable键属性从这种格式更改为： dragItem-${index}来解决这个问题： dragItem-${item.id} 。 每个项目的 id 都是唯一的，因此这似乎使事情更新并正确呈现。 从反应文档（ https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html ）：

当一个键发生变化时，React 会创建一个新的组件实例而不是更新当前的组件实例。

我可以看到我的状态正在正确更新，但是带有 react+beautiful-dnd 的东西没有正确重新渲染（除非你刷新），这是罪魁祸首。