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

我想用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;

当前回答

我的情况… 钩子中的解决方案

const [cep, setCep] = useState('');
const mounted = useRef(false);

useEffect(() => {
    if (mounted.current) {
        fetchAPI();
      } else {
        mounted.current = true;
      }
}, [cep]);

const setParams = (_cep) => {
    if (cep !== _cep || cep === '') {
        setCep(_cep);
    }
};

2020-09-11 06:49:58

其他回答

在我的例子中，我在FlatList的renderItem道具中传递组件名称，而不是函数。它在早期工作，因为我的组件是一个功能组件，但当我添加钩子时，它失败了。

之前:

    <FlatList
        data={memberList}
        renderItem={<MemberItem/>}
        keyExtractor={member => member.name.split(' ').join('')}
        ListEmptyComponent={
          <Text style={{textAlign: 'center', padding: 30}}>
            No Data: Click above button to fetch data
          </Text>
        }
      />

后:

    <FlatList
        data={memberList}
        renderItem={({item, index}) => <MemberItem item={item} key={index} />}
        keyExtractor={member => member.name.split(' ').join('')}
        ListEmptyComponent={
          <Text style={{textAlign: 'center', padding: 30}}>
            No Data: Click above button to fetch data
          </Text>
        }
      />

2021-06-17 16:58:31

当我在类组件中使用useLocation钩子时，我也有同样的问题

错误:

import React from "react";
import { useLocation } from "react-router-dom";

class ShowTheLocation extends React.Component {
  const location = useLocation();
  render() {
    return <div>You are now at {location.pathname}</div>;
  }
}

解决方案:我已经将类组件转换为功能组件，然后问题解决

import React from "react";
import { useLocation } from "react-router-dom";

const ShowTheLocation = () => {
  const location = useLocation();

  return <div>You are now at {location.pathname}</div>;
}

2022-06-22 06:35:06

我在一个自定义node_module上工作时遇到了同样的问题，并在cra(创建react应用程序)中使用npm link进行测试。

我发现在我的自定义节点包中，我必须添加一个peerDependencies

"peerDependencies": {
    "@types/react": "^16.8.6 || ^17.0.0",
    "react": "^17.0.0",
    "react-dom": "^17.0.0"
  },

我把它加到我的包里。json，然后重新构建我的自定义包。然后在CRA，我吹走node_modules, re npm install, re -do npm link <package>，然后启动项目。

固定的一切!

2022-02-17 20:15:41

将其添加到package.json中

"peerDependencies": {
   "react": ">=16.8.0",
   "react-dom": ">=16.8.0"
}

来源:https://robkendal.co.uk/blog/2019-12-22-solving-react-hooks-invalid-hook-call-warning

2021-05-16 12:44:59

在我的情况下，我试图在窗户上使用mdbreact。虽然它安装了，但我得到了上述错误。我不得不重新安装，一切正常。我曾经在antd图书馆遇到过一次

2020-08-30 16:46:01

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

推荐文章

最新文章

标签