Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html

Ошибка случается когда я пытаюсь использовать useSortableData, без useSortableData все работает исправно, в чем может быть дело?

Error

Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at Object.Ah (react-dom.production.min.js:156)
    at Object.exports.useState (react.production.min.js:23)
    at useSortableData (TaskList.js:17)
    at TaskList.render (TaskList.js:63)
    at qi (react-dom.production.min.js:187)
    at pi (react-dom.production.min.js:186)
    at ck (react-dom.production.min.js:269)
    at bk (react-dom.production.min.js:250)
    at ak (react-dom.production.min.js:250)
    at Tj (react-dom.production.min.js:250)

Code

import React, { Component } from "react";
import { Table } from "reactstrap";
import NewTaskModal from "./NewTaskModal";
import { Button, Form, FormGroup, Input, Label } from "reactstrap";
import ConfirmRemovalModal from "./ConfirmRemovalModal";

const useSortableData = (items, config = null) => {
  const [sortConfig, setSortConfig] = React.useState(config);

  const sortedItems = React.useMemo(() => {
    let sortableItems = [...items];
    if (sortConfig !== null) {
      sortableItems.sort((a, b) => {
        if (a[sortConfig.key] < b[sortConfig.key]) {
          return sortConfig.direction === "ascending" ? -1 : 1;
        }
        if (a[sortConfig.key] > b[sortConfig.key]) {
          return sortConfig.direction === "ascending" ? 1 : -1;
        }
        return 0;
      });
    }
    return sortableItems;
  }, [items, sortConfig]);

  const requestSort = (key) => {
    let direction = "ascending";
    if (
      sortConfig &&
      sortConfig.key === key &&
      sortConfig.direction === "ascending"
    ) {
      direction = "descending";
    }
    setSortConfig({ key, direction });
  };

  return { items: sortedItems, requestSort, sortConfig };
};

class TaskList extends Component {
  render() {
    const { task, requestSort, sortConfig } = useSortableData(this.props.products);
    return (
      <Table dark>
        <thead>
          <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Text</th>
            <th>Status</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {!task || task.length <= 0 ? (
            <tr>
              <td colSpan="6" align="center">
                <b>Ops, no one here yet</b>
              </td>
            </tr>
          ) : (
            task.map(task => (
              <tr key={task.id}>
                <td>{task.userName}</td>
                <td>{task.email}</td>
                <td>{task.textTask}</td>
                <td><Input
            type="checkbox"
            name="statusTask"
            onChange={this.onChange}
            value={task.statusTask}
            checked={task.statusTask}
          /></td>
                <td align="center">
                  <NewTaskModal
                    create={false}
                    task={task}
                    resetState={this.props.resetState}
                  />
                  &nbsp;&nbsp;
                  <ConfirmRemovalModal
                    id={task.id}
                    resetState={this.props.resetState}
                  />
                </td>
              </tr>
            ))
          )}
        </tbody>
      </Table>
    );
  }
}

export default TaskList;

Ответы (0 шт):