我想使用 React 在表中显示一些记录,但出现此错误:
无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能由于以下原因之一而发生: 你可能有不匹配的 React 版本和渲染器(例如 React DOM) 您可能违反了 Hooks 规则 您可能在同一个应用程序中拥有多个 React 副本,请参阅有关如何调试和修复此问题的提示。
无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能由于以下原因之一而发生:
import React, { Component } 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, }, })); class allowance extends Component { constructor() { super(); this.state = { allowances: [], }; } componentWillMount() { fetch('http://127.0.0.1:8000/allowances') .then(data => { return data.json(); }).then(data => { this.setState({ allowances: data }); console.log("allowance state", this.state.allowances); }) } render() { const classes = useStyles(); 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 > { this.state.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 函数中调用钩子。在这里阅读更多。
只需将Allowance类组件转换为功能组件即可。
Allowance
工作 CodeSandbox 演示。
const Allowance = () => { const [allowances, setAllowances] = useState([]); useEffect(() => { fetch("http://127.0.0.1:8000/allowances") .then(data => { return data.json(); }) .then(data => { setAllowances(data); }) .catch(err => { console.log(123123); }); }, []); const classes = useStyles(); 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;