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