Mengapakah saya mendapat ralat \'Panggilan cangkuk tidak sah\' dalam React dan bagaimana saya boleh membetulkannya?

Panggilan Cangkuk Tidak Sah dalam Reaksi: Memahami Isu dan Penyelesaian

Ralat "Panggilan cangkuk tidak sah. Cangkuk hanya boleh dipanggil di dalam badan komponen fungsi" timbul apabila cangkuk digunakan secara tidak betul dalam aplikasi React. Ralat ini biasanya berlaku atas salah satu daripada sebab berikut:

• Reaksi Tidak Padan dan Versi Renderer: Pastikan versi React dan pemapar (seperti React DOM) diselaraskan.
• Melanggar Peraturan Cangkuk: Patuhi garis panduan untuk menggunakan cangkuk dalam komponen fungsi, seperti memanggil cangkuk hanya di dalam komponen berfungsi dan mengelakkan memanggilnya lebih daripada sekali bagi setiap komponen.
• Berbilang Salinan React: Elakkan daripada mempunyai berbilang tika React dalam satu aplikasi, yang boleh membawa kepada konflik.

Dalam coretan kod yang disediakan, ralat berlaku kerana cangkuk (khususnya cangkuk useState) sedang digunakan dalam komponen kelas. Ini tidak betul kerana cangkuk direka bentuk secara eksklusif untuk digunakan dalam komponen berfungsi.

Untuk menyelesaikan isu ini, kod tersebut hendaklah ditulis semula sebagai komponen fungsi, seperti yang dilihat di bawah:

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

  const fetchAllowances = async () => {
    const res = await fetch('http://127.0.0.1:8000/allowances');
    const data = await res.json();
    setAllowances(data);
  };

  useEffect(() => {
    fetchAllowances();
  }, []);

  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;</code>

Dengan menukar komponen kepada komponen berfungsi, cangkuk boleh digunakan dengan betul, menyelesaikan ralat "Panggilan cangkuk tidak sah".

Atas ialah kandungan terperinci Mengapakah saya mendapat ralat \'Panggilan cangkuk tidak sah\' dalam React dan bagaimana saya boleh membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!