преобразование компонента класса в функциональную ошибку - PullRequest
Новая
       25

преобразование компонента класса в функциональную ошибку

0 голосов
/ 29 мая 2020

Я использую пакет react-sortable-ho c и хочу вместо этого использовать его в функциональном компоненте. Я пытался преобразовать его, но есть строка, которая выдает ошибку.

Появится список, и я могу перетащить любой элемент, но как только я его уроню, я получаю сообщение об ошибке

Невозможно прочитать свойство 'slice' неопределенного

Похоже, что он отправляет сообщение в эту строку: 

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;

1 Ответ

1 голос
/ 29 мая 2020

Вам не нужен обратный вызов destructure items от setItems, поскольку в вашем случае состояние хранит не объект, а массив. Также вы не должны возвращать значение как объект, вместо этого оно должно быть снова массивом 

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