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

React: 종합 가이드의 잘못된 Hook Call 오류

React를 사용하여 테이블에 데이터를 표시하려고 하면 오류가 발생할 수 있습니다. "잘못된 후크 호출. 후크는 함수 구성 요소의 본문 내부에서만 호출할 수 있습니다." 이 오류는 다양한 이유로 발생하며 이를 해결하는 방법을 이해하는 것은 React 개발에 매우 ​​중요합니다.

오류 원인

1. 일치하지 않는 React 버전 : 올바른 버전의 React와 관련 렌더러가 설치되어 있는지 확인하세요. 버전 불일치로 인해 이 오류가 발생할 수 있습니다.
2. 후크 규칙 위반: React 후크는 기능 구성 요소 내에서만 호출되는 등 특정 규칙을 따릅니다. 이러한 규칙을 준수해야 합니다.
3. 여러 React 인스턴스: 애플리케이션에 React 인스턴스가 하나만 있는지 확인하세요. 여러 인스턴스로 인해 충돌이 발생하고 이 오류가 발생할 수 있습니다.

Material-UI의 예

다음 코드 예를 고려하세요.

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

해결책

이 예제에서는 해당 컴포넌트가 클래스 컴포넌트로 정의되었기 때문에 오류가 발생합니다. 이후 React 버전에 도입된 React 후크는 기능적 구성 요소 내에서만 사용할 수 있습니다. 문제를 해결하려면:

1. 클래스 구성 요소를 기능적 구성 요소로 변환하세요.
2. 메서드 대신 후크를 사용하여 상태를 관리하고 부작용을 수행하세요.

추가 지원

"잘못된 후크 호출" 오류 수정에 대한 추가 지침:

• [React 문서](https://reactjs.org/ docs/hooks-rules.html)
• [선언적 설정](https://blog.logrocket.com/declarative-setup-of-front-end-typescript-and-react/)
• [npm 링크 대체 명령](https://blog.bitsrc.io/an-alternative-npm-link-command-a49f7a92bfd4)

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