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}
/>
<ConfirmRemovalModal
id={task.id}
resetState={this.props.resetState}
/>
</td>
</tr>
))
)}
</tbody>
</Table>
);
}
}
export default TaskList;