将类组件转换为功能错误答案

【问题标题】：converting class component to functional error将类组件转换为功能错误
【发布时间】：2020-05-29 18:11:52
【问题描述】：

我正在使用react-sortable-hoc 包并希望在功能组件中使用它。我试图转换它，但有一行给我一个错误。

列表显示，我可以拖动任何元素，但一旦我放下它，我就会得到错误

无法读取未定义的属性“切片”

看起来好像是在这一行发帖：

items: arrayMove(items, oldIndex, newIndex),

这是基于类的版本：

import React, {Component} from 'react';
import {render} from 'react-dom';
import {sortableContainer, sortableElement} from 'react-sortable-hoc';
import arrayMove from 'array-move';

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

const SortableContainer = sortableContainer(({children}) => {
  return <ul>{children}</ul>;
});

class App extends Component {
  state = {
    items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
  };

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

  render() {
    const {items} = this.state;

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

render(<App />, document.getElementById('root'));

以及我正在尝试组合的版本：

import React, { useState } from "react";
import { sortableContainer, sortableElement } from "react-sortable-hoc";
import arrayMove from "array-move";

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

const SortableContainer = sortableContainer(({ children }) => {
  return <ul>{children}</ul>;
});

const Dashboard = () => {
  const [items, setItems] = useState([
    "Item 1",
    "Item 2",
    "Item 3",
    "Item 4",
    "Item 5",
    "Item 6",
  ]);

  const onSortEnd = ({ oldIndex, newIndex }) => {
    setItems(({ items }) => ({
      items: arrayMove(items, oldIndex, newIndex),
    }));
  };

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

export default Dashboard;

【问题讨论】：

标签： reactjs drag-and-drop draggable

【解决方案1】：

您不需要来自setItems 回调的destructure items，因为状态不会将对象存储在您的案例中，而是存储一个数组。此外，您不能将值设置为对象，而应该再次将其设置为数组

setItems((items) => arrayMove(items, oldIndex, newIndex));

【讨论】：