Javascript 钩子只能在函数组件的主体内部调用。但是它'；它已经在一个函数中了

我在这里遵循教程：并尝试实现react data grid，因为它为我提供了对特定单元格进行排序、树状视图等功能。但我遇到了如下错误：

{
  "name": "dc-react-test-2",
  "version": "1.1.0",
  "description": "",
  "keywords": [],
  "main": "src/index.js",
  "dependencies": {
    "react": "^16.8.2",
    "react-dom": "^16.8.2",
    "react-scripts": "2.1.5",
    "react-bootstrap": "0.32.4",
    "react-data-grid": "5.0.1",
    "immutable": "3.8.2"
  },
  "devDependencies": {},
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

不变冲突：只能在函数组件的主体内部调用挂钩

import React from "react";
import { useState } from "react";
import ReactDOM from "react-dom";
import ReactDataGrid from "react-data-grid";
import "./styles.css";

const defaultColumnProperties = {
    resizable: true,
    sortable: true,
    width: 300
};

const columns = [
    { key: "key1", name: "key1", sortDescendingFirst: true },
    { key: "key2", name: "key2" },
    { key: "key3", name: "key3" },
    { key: "key4", name: "key4" },
    { key: "key5", name: "key5" }
].map(c => ({ ...c, ...defaultColumnProperties }));

const sortRows = (initialRows, sortColumn, sortDirection) => rows => {
    const comparer = (a, b) => {
        if (sortDirection === "ASC") {
            return a[sortColumn] > b[sortColumn] ? 1 : -1;
        } else if (sortDirection === "DESC") {
            return a[sortColumn] < b[sortColumn] ? 1 : -1;
        }
    };
    return sortDirection === "NONE" ? initialRows : [...rows].sort(comparer);
};

class Example extends React.Component {
    constructor() {
        super();
        this.state = { data: [] };
    }

    async componentDidMount() {
        const url = "http://localhost:8080";
        try {
            const response = await fetch(url, {
                mode: "cors",
                method: "GET"
            });
            if (!response.ok) {
                throw Error(response);
            }
            const res = await response.json();

            this.setState({ data: res });
        } catch (error) {
            console.log(error);
        }
    }

    someStateFunction = data => {
        return useState(data);
    };

    render() {
        const [rows, setRows] = this.someStateFunction(
            this.state.data
        );
        return (
            <ReactDataGrid
                columns={columns}
                rowGetter={i => rows[i]}
                rowsCount={rows.length}
                minHeight={5000}
                onColumnResize={(idx, width) =>
                    console.log(`Column ${idx} has been resized to ${width}`)
                }
                onGridSort={(sortColumn, sortDirection) =>
                    setRows(
                        sortRows(
                            this.state.data,
                            sortColumn,
                            sortDirection
                        )
                    )
                }
            />
        );
    }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Example />, rootElement);

---

请帮忙。我是一个非常新的反应者。

示例

在您的示例中不是函数组件，而是类组件。函数组件只是一个常规javascript函数

---

这里混合了类组件状态和函数组件状态（

useState

）。你必须选择。要么你坚持使用类组件，并且你必须在

这个.state中添加一些状态，以跟踪排序等，要么你使用全功能并进行提取。
你能指导我需要在代码中做哪些更改，以使用功能组件或类组件吗？在这里，我的需求是使用async/await进行RESTAPI调用，并使用useState（），如代码所示。