Mengapakah saya mendapat ralat \'Panggilan cangkuk tidak sah\' dalam aplikasi React saya?

Ralat Panggilan Cangkuk Tidak Sah dalam React: Panduan Komprehensif

Apabila cuba memaparkan data dalam jadual menggunakan React, anda mungkin menghadapi ralat "Panggilan cangkuk tidak sah. Cangkuk hanya boleh dipanggil di dalam badan komponen fungsi." Ralat ini berlaku atas pelbagai sebab dan memahami cara menyelesaikannya adalah penting untuk pembangunan React.

Punca Ralat

1. Versi Reaksi Tidak Padan : Pastikan anda mempunyai versi React yang betul dan pemapar yang berkaitan dipasang. Ketidakkonsistenan versi boleh menyebabkan ralat ini.
2. Pelanggaran Peraturan Cangkuk: Cangkuk tindak balas mengikut peraturan tertentu, seperti hanya digunakan dalam komponen berfungsi. Pastikan anda mematuhi konvensyen ini.
3. Berbilang Tindak Balas: Sahkan bahawa anda hanya mempunyai satu tika React dalam aplikasi anda. Berbilang kejadian boleh menyebabkan konflik dan mencetuskan ralat ini.

Contoh dengan Bahan-UI

Pertimbangkan contoh kod berikut:

<code class="javascript">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;</code>

Penyelesaian

Dalam contoh ini, ralat timbul kerana komponen ditakrifkan sebagai komponen kelas. Cangkuk React, yang diperkenalkan dalam versi React kemudian, hanya boleh digunakan dalam komponen berfungsi. Untuk menyelesaikan isu:

1. Tukar komponen kelas kepada komponen berfungsi.
2. Gunakan cangkuk dan bukannya kaedah untuk mengurus keadaan dan melakukan kesan sampingan.

Bantuan Lanjut

Untuk panduan tambahan tentang membetulkan ralat "Panggilan cangkuk tidak sah":

• [React Documentation](https://reactjs.org/ docs/hooks-rules.html)
• [Persediaan Deklaratif](https://blog.logrocket.com/declarative-setup-of-front-end-typescript-and-react/)
• [Arahan Alternatif Pautan npm](https://blog.bitsrc.io/an-alternative-npm-link-command-a49f7a92bfd4)

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