React コンポーネントで「無効なフック呼び出し」エラーが発生するのはなぜですか?どうすれば修正できますか?

React コンポーネントの「無効なフック呼び出し」エラーを解決する

React フックはコンポーネントの状態を操作する強力な方法を提供しますが、従わなければならない特定のルールがあります。発生する可能性のある一般的なエラーの 1 つは、「無効なフック呼び出し」です。これは、フックが関数コンポーネントの本体の外部で呼び出されたときに発生します。

エラーの原因:

1. React バージョンの不一致: React とレンダラー (React DOM など) のバージョンに互換性があることを確認してください。
2. フックのルール違反: フックは各レンダリング サイクル中に同じ順序で呼び出す必要があり、内部で呼び出すことはできません。条件ステートメントまたはループ。
3. React の複数のインスタンス: アプリケーション内に React のコピーが 1 つだけあることを確認します。

問題のトラブルシューティング:

提供されたコード例では、問題はクラス コンポーネントのcomponentWillMount メソッドに遡ることができます。 React フックはクラス コンポーネントではサポートされていません。

解決策:

この問題を解決してフックを使用するには、コンポーネントを機能コンポーネントに変換する必要があります。更新されたコードは次のとおりです:

import React, { useState, useEffect } 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 [allowances, setAllowances] = useState([]);
  const classes = useStyles();

  useEffect(() => {
    fetch('http://127.0.0.1:8000/allowances')
      .then(data => data.json())
      .then(data => setAllowances(data));
  }, []);

  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;

追加メモ:

場合によっては、この問題は、react-scripts の古いバージョンの使用によって発生する可能性もあります。バージョンを最新リリースに更新すると、問題が解決される可能性があります。

以上がReact コンポーネントで「無効なフック呼び出し」エラーが発生するのはなぜですか?どうすれば修正できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。