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

2023年4月11日 185次阅读

我需要可排序的拖放组件,以便能够在用户从另一个容器单击按钮时使用新值重新渲染,并仍然保留拖放功能.如果列表首先包含[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命令,以确认项目中的列表按需要重新排序.它只是在视觉上不会发生.拖放时没有控制台错误.

任何帮助,将不胜感激.

最佳答案 我通过利用getDerivedStateFromProps生命周期方法来更新项状态来解决这个问题.

点赞