React에서 \'잘못된 후크 호출\' 오류가 발생하는 이유는 무엇이며 어떻게 해결할 수 있나요?

React의 잘못된 Hook 호출: 문제 및 해결 방법 이해

"잘못된 Hook 호출입니다. Hooks는 내부에서만 호출할 수 있습니다. 함수 구성 요소의 본문'은 React 애플리케이션 내에서 후크가 부적절하게 호출될 때 발생합니다. 이 오류는 일반적으로 다음 이유 중 하나로 인해 발생합니다.

• React 및 렌더러 버전 불일치: React 및 렌더러(예: React DOM) 버전이 일치하는지 확인하세요.
• 후크 규칙 위반: 함수 구성 요소 내에서만 후크를 호출하고 구성 요소당 두 번 이상 호출하지 않는 등 함수 구성 요소에서 후크 사용에 대한 지침을 준수하세요.
• React의 여러 복사본: 단일 애플리케이션에 여러 개의 React 인스턴스가 있으면 충돌이 발생할 수 있으므로 피하세요.

제공된 코드 조각에서는 후크 때문에 오류가 발생합니다. (특히 useState 후크)는 클래스 구성 요소 내에서 사용됩니다. 후크는 기능적 구성 요소에서만 사용하도록 설계되었기 때문에 이는 올바르지 않습니다.

문제를 해결하려면 아래와 같이 코드를 기능 구성 요소로 다시 작성해야 합니다.

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

변환하여 기능적 구성요소에 대한 후크를 올바르게 활용하여 "잘못된 후크 호출" 오류를 해결할 수 있습니다.

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