React에서 \'잘못된 후크 호출\' 오류가 발생하는 이유는 무엇입니까?

"잘못된 후크 호출" 오류 이해

React에서 "잘못된 후크 호출. 후크는 내부에서만 호출할 수 있습니다." 함수 구성 요소의 본문"은 React 후크가 잘못 사용되고 있음을 나타냅니다. Hooks는 React 상태 및 기타 기능에 대한 액세스를 제공하는 특수 함수이지만 클래스 구성 요소가 아닌 기능 구성 요소 내에서 사용해야 합니다.

클래스 구성 요소 오류 해결

제공된 코드 샘플은 React Hooks와 호환되지 않는 클래스 구성 요소(허용)를 사용합니다. 이 오류를 해결하려면 클래스 구성 요소를 기능 구성 요소로 변환해야 합니다. 업데이트된 코드는 다음과 같습니다.

<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>

이 기능 구성 요소에서는 useState 및 useEffect 후크가 구성 요소 본문 내에서 올바르게 사용됩니다. 오류를 해결하려면 원래 클래스 구성 요소를 이 기능 구성 요소로 교체해야 합니다.

위 내용은 React에서 \'잘못된 후크 호출\' 오류가 발생하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!