Mengapa Saya Mendapat Ralat \"Panggilan Cangkuk Tidak Sah\" dalam React?

Memahami Ralat "Panggilan Cangkuk Tidak Sah"

Dalam React, ralat "Panggilan cangkuk tidak sah. Cangkuk hanya boleh dipanggil di dalam badan komponen fungsi" menunjukkan bahawa cangkuk React sedang digunakan dengan tidak betul. Cangkuk ialah fungsi khas yang menyediakan akses kepada keadaan React dan keupayaan lain, tetapi ia mesti digunakan dalam komponen berfungsi, bukan komponen kelas.

Menyelesaikan Ralat untuk Komponen Kelas

Sampel kod yang disediakan menggunakan komponen kelas (elaun), yang tidak serasi dengan cangkuk React. Untuk menyelesaikan ralat ini, anda harus menukar komponen kelas kepada komponen berfungsi. Berikut ialah kod yang dikemas kini:

<code class="javascript">import React, { useState, useEffect, Fragment } 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
  }
}));

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

  useEffect(() => {
    fetch('http://127.0.0.1:8000/allowances')
      .then(data => data.json())
      .then(data => setAllowances(data));
  }, []);

  return (
    <Fragment>
      <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>
    </Fragment>
  );
};

export default Allowance;</code>

Dalam komponen berfungsi ini, cangkuk useState dan useEffect digunakan dengan betul dalam badan komponen. Anda harus menggantikan komponen kelas asal dengan komponen berfungsi ini untuk menyelesaikan ralat.

Atas ialah kandungan terperinci Mengapa Saya Mendapat Ralat \"Panggilan Cangkuk Tidak Sah\" dalam React?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!