web-dev-qa-db-fra.com

Appel de raccordement non valide. Les crochets ne peuvent être appelés qu'à l'intérieur du corps d'un composant de fonction

Je suis nouveau à React et maintenant je voudrais montrer un enregistrement dans le tableau et maintenant j'ai cette erreur. Aidez-moi, s'il vous plaît.

Appel de raccordement non valide. Les crochets ne peuvent être appelés qu'à l'intérieur du corps d'un composant de fonction. Cela peut se produire pour l'une des raisons suivantes: 1. Vous pouvez avoir des versions incompatibles de React et du moteur de rendu (tel que React DOM)) 2. Vous pourriez enfreignez les règles des crochets 3. Vous pouvez avoir plus d'une copie de React dans la même application Voir pour obtenir des conseils sur la façon de déboguer et de résoudre ce problème.

import React,{Component} from 'react';
import { makeStyles } from '@material-ui/core/styles';
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 Paper from '@material-ui/core/Paper';

const useStyles = makeStyles(theme => ({
    root: {
      width: '100%',
      marginTop: theme.spacing(3),
      overflowX: 'auto',
    },
    table: {
      minWidth: 650,
    },
  }));

class allowance extends Component{
    constructor(){
        super();
        this.state={
            allowances:[],
        };

    }

    componentWillMount() {
        fetch('http://127.0.0.1:8000/allowances')
        .then(data=>{  

            return data.json();      

        }).then(data=> {          

            this.setState({allowances : data});

            console.log("allowance state",this.state.allowances);
        })

    }



    render() {
        const classes = useStyles();
        return (
            <Paper className={classes.root}>
              <Table className={classes.table}>
                <TableHead>
                  <TableRow>
                    <TableCell>Allow ID</TableCell>
                    <TableCell align="right">Description</TableCell>
                    <TableCell align="right">Allow Amount</TableCell>
                    <TableCell align="right">AllowType</TableCell>

                  </TableRow>
                </TableHead>
                <TableBody>
                  {this.state.allowances.map(row => (
                    <TableRow key={row.id}>
                      <TableCell component="th" scope="row">
                        {row.AllowID}
                      </TableCell>
                      <TableCell align="right">{row.AllowDesc}</TableCell>
                      <TableCell align="right">{row.AllowAmt}</TableCell>
                      <TableCell align="right">{row.AllowType}</TableCell>                    
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </Paper>
          );}

}

export default allowance;
reactjsmaterial-ui
13
Jze

Car tu Only Call Hooks from React Functions. Voir plus ici https://reactjs.org/docs/hooks-rules.html#only-call-hooks-from-react-functions . Convertissez simplement le composant de classe Allowance en composant fonctionnel. La démo fonctionne ici https://codesandbox.io/s/amazing-poitras-k2fuf

const Allowance = () => {
  const [allowances, setAllowances] = useState([]);

  useEffect(() => {
    fetch("http://127.0.0.1:8000/allowances")
      .then(data => {
        return data.json();
      })
      .then(data => {
        setAllowances(data);
      })
      .catch(err => {
        console.log(123123);
      });
  }, []);

  const classes = useStyles();
  return (
    <Paper className={classes.root}>
      <Table className={classes.table}>
        <TableHead>
          <TableRow>
            <TableCell>Allow ID</TableCell>
            <TableCell align="right">Description</TableCell>
            <TableCell align="right">Allow Amount</TableCell>
            <TableCell align="right">AllowType</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {allowances.map(row => (
            <TableRow key={row.id}>
              <TableCell component="th" scope="row">
                {row.AllowID}
              </TableCell>
              <TableCell align="right">{row.AllowDesc}</TableCell>
              <TableCell align="right">{row.AllowAmt}</TableCell>
              <TableCell align="right">{row.AllowType}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </Paper>
  );
};

export default Allowance;
11
Giang Le

React linter suppose que chaque méthode commençant par use car les hooks et hooks ne fonctionnent pas à l'intérieur des classes. en renommant const useStyles dans tout ce qui ne commence pas par use comme const myStyles tu es prêt.

Mise à jour:

makeStyles est une API de hook et vous ne pouvez pas l'utiliser à l'intérieur des classes. vous pouvez utiliser l'API des composants stylisés. voir ici

4
Sina

Vous pouvez convertir un composant de classe en crochets, mais Material v4 a un withStyles HOC. https://material-ui.com/styles/basics/#higher-order-component-api En utilisant ce HOC, vous pouvez garder votre code inchangé.

1
Chinmay Pandey

Hier, j'ai raccourci le code (je viens d'ajouter <Provider store={store}>) et a toujours ce problème d'appel de raccordement non valide. Cela m'a soudainement rendu compte de l'erreur que j'ai commise: je n'ai pas installé le logiciel react-redux dans ce dossier.

J'avais installé ce logiciel dans l'autre dossier de projet, donc je ne savais pas que celui-ci en avait également besoin. Après l'avoir installé, l'erreur a disparu.

1
Zelda Yuan