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

React での無効なフック呼び出し: 問題と解決策の理解

エラー「無効なフック呼び出しです。フックは内部でのみ呼び出すことができます」関数コンポーネントの本体」は、React アプリケーション内でフックが不適切に呼び出されたときに発生します。このエラーは通常、次のいずれかの理由で発生します:

• React とレンダラーのバージョンの不一致: React とレンダラー (React DOM など) のバージョンが一致していることを確認してください。
• フックのルールを破る: 機能コンポーネント内でのみフックを呼び出し、コンポーネントごとに複数回呼び出さないようにするなど、関数コンポーネントでフックを使用するためのガイドラインに従ってください。
• React の複数のコピー: 競合が発生する可能性がある 1 つのアプリケーション内に 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 中国語 Web サイトの他の関連記事を参照してください。