因为你Only Call Hooks from ReactFunctions。在此处查看更多信息https://reactjs.org/docs/hooks-rules.html#only-call-hooks-from-react-functions。只需将Allowance类组件转换为功能组件。该演示在这里工作https://codesandbox.io/s/amazing-poitras-k2fuf
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;解决方法
我是React的新手，现在我想在表中显示一些记录，现在出现此错误。请帮帮我。
无效的挂接调用。挂钩只能在功能组件的主体内部调用。发生这种情况可能是由于以下原因之一：1.您的React和渲染器版本可能不匹配（例如ReactDOM）2.您可能违反了《胡克规则》 3.您可能在其中包含多个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;
