Mengapakah saya mendapat ralat \'Panggilan Cangkuk Tidak Sah\' dalam komponen React saya dan bagaimana saya boleh membetulkannya?

Menyelesaikan Ralat "Panggilan Cangkuk Tidak Sah" dalam Komponen React

Cangkuk tindak balas menyediakan cara yang berkesan untuk berinteraksi dengan keadaan komponen, tetapi ia datang dengan peraturan tertentu yang mesti dipatuhi. Satu ralat biasa yang boleh berlaku ialah "Panggilan cangkuk tidak sah." Ini berlaku apabila cangkuk dipanggil di luar badan komponen fungsi.

Punca Ralat:

1. Versi Reaksi Tidak Padan: Pastikan anda mempunyai versi React dan pemapar yang serasi (cth., React DOM).
2. Peraturan Cangkuk Pecah: Cangkuk mesti dipanggil dalam susunan yang sama semasa setiap kitaran pemaparan dan tidak boleh dipanggil di dalam pernyataan atau gelung bersyarat.
3. Berbilang Kejadian React: Sahkan bahawa terdapat hanya satu salinan React dalam aplikasi.

Menyelesaikan Masalah Isu :

Dalam contoh kod yang disediakan, isu itu boleh dikesan kepada kaedah componentWillMount bagi komponen kelas. Cangkuk tindak balas tidak disokong dalam komponen kelas.

Penyelesaian:

Untuk menyelesaikan isu ini dan menggunakan cangkuk, komponen itu hendaklah ditukar kepada komponen berfungsi. Berikut ialah kod yang dikemas kini:

import React, { useState, useEffect } 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 [allowances, setAllowances] = useState([]);
  const classes = useStyles();

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

  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;

Nota Tambahan:

Dalam sesetengah kes, isu ini juga mungkin disebabkan oleh penggunaan versi skrip reaksi yang sudah lapuk. Mengemas kini versi kepada keluaran terbaharu berpotensi menyelesaikan masalah.

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