React で「無効なフック呼び出し」エラーが発生するのはなぜですか?

「無効なフック呼び出し」エラーを理解する

React では、「無効なフック呼び出しです。フックは内部でのみ呼び出すことができます」というエラーが発生します。関数コンポーネントの本文」は、React フックが正しく使用されていないことを示します。フックは React の状態やその他の機能へのアクセスを提供する特別な関数ですが、クラス コンポーネントではなく機能コンポーネント内で使用する必要があります。

クラス コンポーネントのエラーの解決

提供されたコードサンプルはクラスコンポーネント(allowance)を使用しており、Reactフックと互換性がありません。このエラーを解決するには、クラス コンポーネントを機能コンポーネントに変換する必要があります。更新されたコードは次のとおりです。

<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 中国語 Web サイトの他の関連記事を参照してください。