无效的钩子调用。钩子只能在函数组件的内部调用

我想用React在一个表中显示一些记录，但我得到了这个错误:

无效的钩子调用。类的主体内部只能调用钩子功能组件。这可能发生在以下情况之一原因: React和渲染器的版本可能不匹配(比如React DOM) 你可能违反了胡克斯的规矩你可能在同一个应用程序中有多个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;

当前回答

当你以错误的方式声明useDispatch from react-redux时，也会发生此错误: 当你执行:const dispatch = useDispatch而不是:const dispatch = useDispatch();(也就是说要记得加上圆括号)

2020-10-08 16:13:17

其他回答

您可以将类组件转换为钩子，但Material v4有一个withStyles HOC。 https://material-ui.com/styles/basics/#higher-order-component-api 使用这个HOC，您可以保持代码不变。

2019-06-19 11:07:25

当你遇到这个问题时，你只需要重新安装这个“npm install react-bootstrap@next bootstrap@5.1.0”，你的错误就会解决。

2021-09-07 06:04:59

我也遇到过类似的问题，但我的情况有点极端。

接受的答案应该适用于大多数人，但对于在使用镭的现有react代码中使用react钩子的其他人，请注意，如果你使用镭，如果没有变通办法，钩子将无法工作。

在我的例子中，我像这样输出我的组件:

// This is pseudocode

const MyComponent = props => {
  const [hookValue, setHookValue] = useState(0);
  return (
    // Use the hook here somehow
  )
}

export default Radium(MyComponent)

移除镭包装从出口固定我的问题。如果需要使用镭，求助于类组件及其生命周期函数可能是一种更简单的解决方案。

希望这至少能帮助到另一个人。

2022-01-28 19:14:23

我刚刚开始使用钩子，当我在函数中调用useEffect时，我得到了上面的警告:

然后我必须将useEffect移到函数之外，如下所示:

 const onChangeRetypePassword = async value => {
  await setRePassword(value);
//previously useEffect was here

  };
//useEffect outside of func 

 useEffect(() => {
  if (password !== rePassword) {
  setPasswdMismatch(true);

     } 
  else{
    setPasswdMismatch(false);
 }
}, [rePassword]);

希望对大家有所帮助!

2020-04-01 09:28:59

在我的情况下，问题是我cd到错误的目录进行npm安装。我只是在正确的目录中重新安装了库，它工作得很好!

2022-01-23 16:37:55

无效的钩子调用。钩子只能在函数组件的内部调用

推荐文章

最新文章

标签