无效的挂钩调用。 Hooks 只能在函数组件的主体内部调用

Question

我想使用 React 在表中显示一些记录，但出现此错误：

无效的挂钩调用。 Hooks 只能在 a 的主体内部调用

功能组件。这可能发生在以下情况之一

原因：

1. 你可能有不匹配的 React 版本和渲染器（例如 React DOM）

2. 您可能违反了 Hooks 规则

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;

原文由 lwin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你只能从 React 函数中调用钩子。 在这里 阅读更多。

只需将 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;

原文由 Giang Le 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

当我使用 npm link 安装我使用 cra 构建的本地库时遇到了这个问题。我在 这里 找到了答案。从字面上说：

当您使用 npm link 或等效项时，也会出现此问题。在这种情况下，您的打包器可能会“看到”两个 React——一个在应用程序文件夹中，一个在您的库文件夹中。假设“myapp”和“mylib”是同级文件夹，一种可能的解决方法是从“mylib”运行“npm link ../myapp/node_modules/react”。这应该使库使用应用程序的 React 副本。

因此，运行命令： npm link <path_to_local_library>/node_modules/react ，例如。在我的例子中 npm link ../../libraries/core/decipher/node_modules/react 从项目目录中解决了这个问题。

原文由 theVoogie 发布，翻译遵循 CC BY-SA 4.0 许可协议