javascript - 谁能建议将 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 生命周期方法来更新项目状态来解决这个问题。