解决 React 组件中的“无效 Hook 调用”错误
React hooks 提供了一种与组件状态交互的强大方法,但是它们来了必须遵守某些规则。可能发生的一种常见错误是“无效的挂钩调用”。当钩子在函数组件主体之外调用时,就会发生这种情况。
错误原因:
问题排查:
在提供的代码示例中,问题可以追溯到类组件的 componentWillMount 方法。类组件不支持 React hooks。
解决方案:
要解决此问题并使用 hooks,应将组件转换为功能组件。以下是更新后的代码:
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 组件中出现“无效的 Hook Call”错误以及如何修复它?的详细内容。更多信息请关注PHP中文网其他相关文章!