Хуки могут быть вызваны только внутри тела функционального компонента. Но это уже в функции

Question

Я следую этому уроку здесь: http://adazzle.github.io/react-data-grid/docs/examples/column-sorting и пытаюсь реализовать grid-данные реагирования, поскольку он предоставляет мне функциональность для выполнения сортировки, древовидного вида для конкретной ячейки и т. Д. Но я получить ошибку, как показано ниже:

Инвариантное нарушение: хуки могут вызываться только внутри тела компонента функции.

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);

Как мне решить это? useState() используется только внутри функции? Я делаю это неправильно?

package.json выглядит следующим образом:

{
  "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"
  ]
}

Пожалуйста, помогите. Я новичок, чтобы реагировать.

Answer 1

Example не является компонентом функции в вашем примере, это компонент класса.Функциональный компонент - это обычная функция JavaScript. Вот статья о разнице.

Здесь вы смешиваете состояния компонента класса и состояния компонента функции (useState).Вы должны выбрать.Либо вы придерживаетесь компонента класса, и вам нужно добавить какое-то состояние к this.state, чтобы отслеживать сортировки и т. Д., Либо вы переходите на полнофункциональный режим и делаете выборку в useEffect ловушке .