Получение ** Ошибка: неверный вызов ловушки. Хуки могут быть вызваны только внутри тела компонента функции. **

Question

Я использую материал пользовательского интерфейса, и когда я использую компонент меню, чем получаю ошибку Ошибка: Неверный вызов ловушки. Хуки могут быть вызваны только внутри тела функционального компонента. Я использую реакцию с каркасом material-ui с Ax ios API. Я использую реагировать с Material-UI Framework с Ax ios API. Я использую реагировать с Material-UI Framework с Ax ios API

import React, { Component } from 'react'
import ApiService from "../../service/ApiService";
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Button from '@material-ui/core/Button';
import CreateIcon from '@material-ui/icons/Create';
import DeleteIcon from '@material-ui/icons/Delete';
import Typography from '@material-ui/core/Typography';
import { Grid, FormGroup, FormControlLabel } from '@material-ui/core';
import Switch from '@material-ui/core/Switch';
class CategoryListUserComponent extends Component<any,any>{

    constructor(props: any){
        super(props)
        this.state = {
            users: [],
            message: null
        }
        this.deleteUser = this.deleteUser.bind(this);
        this.editUser = this.editUser.bind(this);
        this.addUser = this.addUser.bind(this);
        this.reloadUserList = this.reloadUserList.bind(this);
    }

    componentDidMount() {
        this.reloadUserList();
    }

    reloadUserList() {
        ApiService.fetchUsers()
            .then((res) => {
                this.setState({users: res.data})
            });
    }

    deleteUser(userId: any) {
        ApiService.deleteUser(userId)
           .then(res => {
               this.setState({message : 'User deleted successfully.'});
               this.setState({users: this.state.users.filter((user: { id: any; }) => user.id !== userId)});
           })
    }

    editUser(id: any) {
        window.localStorage.setItem("userId", id);
        this.props.history.push('/edit-user');
    }

    addUser() {
        window.localStorage.removeItem("userId");
        this.props.history.push('/add-user');
    }

    render() {
        const [checked, setChecked] = React.useState(false);

        const toggleChecked = () => {
          setChecked((prev) => !prev);
        };
        return (
            <Grid>
                                <Typography variant="h4" style={style}>User Details</Typography>
                <Button variant="contained" color="primary" onClick={() => this.addUser()}>
                    Add User
                </Button>
                <Grid  container   className="listContainer">
                <Table>
                    <TableHead>
                        <TableRow>
                            <TableCell>Id</TableCell>
                            <TableCell>Initiator</TableCell>
                            <TableCell align="left">Category</TableCell>
                            <TableCell align="left">Date</TableCell>
                            <TableCell align="left">Time</TableCell>
                            <TableCell align="left"></TableCell>
                            <TableCell align="left"></TableCell>
                            <TableCell align="left"></TableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        {this.state.users && this.state.users.map((row: { id: {} | null | undefined; name: React.ReactNode; email: React.ReactNode; username: React.ReactNode; age: React.ReactNode; salary: React.ReactNode; }) => (
                            <TableRow>
                                <TableCell component="th" scope="row">
                                    {row.id}
                                </TableCell>
                                <TableCell align="left">{row.name}</TableCell>
                                <TableCell align="left">{row.username}</TableCell>
                                <TableCell align="left">13-10-2020</TableCell>
                                <TableCell align="left">10:00 AM</TableCell>
                                <TableCell align="left"><FormGroup>
                                    <FormControlLabel
                                        control={<Switch size="small" checked={checked} onChange={toggleChecked} />}
                                        label="Small"
                                    />
                                    <FormControlLabel
                                        control={<Switch checked={checked} onChange={toggleChecked} />}
                                        label="Normal"
                                    />
                                    </FormGroup>
                                    </TableCell>
                                <TableCell align="left" onClick={() => this.editUser(row.id)}><CreateIcon /></TableCell>
                                <TableCell align="left" onClick={() => this.deleteUser(row.id)}><DeleteIcon /></TableCell>

                            </TableRow>
                        ))}
                    </TableBody>
                </Table>

            </Grid>
            </Grid>
        );
    }

}

const style ={
    display: 'flex',
    justifyContent: 'center'
}

export default CategoryListUserComponent;

Answer 1

Начало вашей функции рендеринга:

render() {
    const [checked, setChecked] = React.useState(false);

Но вы не можете использовать useState здесь, вы должны переместить переменную checked в состояние компонента (в конструкторе):

this.state = {
    users: [],
    message: null,
    checked: false
}

И переписать функцию toggleChecked:

toggleChecked = () => {
    this.setState({checked: !this.state.checked});
};

Answer 2

Как указано

Крючки - это новое дополнение в React 16.8. Они позволяют вам использовать состояние и другие возможности React без написания класса.

Таким образом, вы либо пишете класс (вам не нужны хуки), либо вы пишете функциональный компонент с крючками.

Answer 3

Вы не можете использовать ловушку в компоненте класса, как указано в документации"Хуки не работают внутри классов"

Возможно, вы захотите попробовать некоторые обходные пути, но не будете работать для каждого сценарий использования: как использовать компоненты реакции в классе