React アプリケーションで「無効なフック呼び出し」エラーが発生するのはなぜですか?

React での無効なフック呼び出しエラー: 総合ガイド

React を使用してテーブル内のデータを表示しようとすると、エラーが発生する場合があります「無効なフック呼び出しです。フックは関数コンポーネントの本体内でのみ呼び出すことができます。」このエラーはさまざまな理由で発生し、その解決方法を理解することが React 開発にとって重要です。

エラーの原因

1. React バージョンの不一致: 正しいバージョンの React と関連するレンダラーがインストールされていることを確認してください。バージョンの不一致により、このエラーが発生する可能性があります。
2. フック ルールの違反: React フックは、機能コンポーネント内でのみ呼び出されるなど、特定のルールに従います。これらの規則に従っていることを確認してください。
3. 複数の React インスタンス: アプリケーション内に React のインスタンスが 1 つだけあることを確認します。複数のインスタンスにより競合が発生し、このエラーが発生する可能性があります。

マテリアル 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 Documentation](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 中国語 Web サイトの他の関連記事を参照してください。