qq_45960446 2022-10-17 13:43 采纳率: 100%
浏览 98
已结题

急!react + ant design 错误求解!

问题遇到的现象和发生背景

我用react + ant design做前端。在使用ant design组件时一直遇到如下问题:
react.development.js:1476 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app
用代码块功能插入代码,请勿粘贴截图
import { Component } from 'react';
/* import { Button } from "antd"; */
import { Table } from 'antd';
import "antd/dist/antd.min.css";
class GoodsList extends Component{
    state = {}; //存储状态
    componentDidMount() {
        const dataSource = [
            {
              key: '1',
              name: '胡彦斌',
              age: 32,
              address: '西湖区湖底公园1号',
            },
            {
              key: '2',
              name: '胡彦祖',
              age: 42,
              address: '西湖区湖底公园1号',
            },
          ];
          this.setState({dataSource})
    }
    render() {
        const columns = [
            {
              title: '姓名',
              dataIndex: 'name',
              key: 'name',
            },
            {
              title: '年龄',
              dataIndex: 'age',
              key: 'age',
            },
            {
              title: '住址',
              dataIndex: 'address',
              key: 'address',
            },
          ];
        return <Table dataSource={this.state.dataSource} columns={columns} />;
    }
}
export default GoodsList;


import GoodsList from "./views/GoodsList";
function App() {
  return (
    <div>
      <GoodsList></GoodsList>
    </div>
  );
}
 
export default App;

import React from 'react'
import ReactDOM from 'react-dom'
import App from "./App"

ReactDOM.render(<App />, document.getElementById("root"))
运行结果及报错内容

img

img

我的解答思路和尝试过的方法

我用的教程是react17 然后我下载的是18,但已经降成了17。 根据教程来编写会出现此类错误。根据ant design官方文档来编写也还是出现此类错误。 网上查了各种方法,但都不管用。

我想要达到的结果

不出现截图中的错误

  • 写回答

5条回答 默认 最新

  • Jackyin0720 2022-10-17 14:23
    关注

    你参照这个实际案例,看看是否对你有所帮助:https://blog.csdn.net/qq_45327886/article/details/109129999
    我看了下,和你的报错类似,解决方法看是否对你有所启发

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(4条)

报告相同问题?

问题事件

  • 系统已结题 10月25日
  • 已采纳回答 10月17日
  • 创建了问题 10月17日

悬赏问题

  • ¥15 TMC2209串口模式下读取不到寄存器的值串口助手蓝色字体是发过去的消息,绿色字体是收到的消息,第二行发送读取寄存器的指令但是没有读取到寄存器的值串口助手如下图:接线如下图,如何解决?
  • ¥15 高通安卓11提取完整线刷包软件,或者优博讯dt50顺丰刷机包
  • ¥20 C,有个译码器,换了信道就跑不出原来数据
  • ¥15 MIMIC数据库安装问题
  • ¥60 基于JTag协议开发Fpga下载器上位机,哪位大🐂有偿指导?
  • ¥20 全书网Java爬取数据
  • ¥15 怎么获取红包封面的原始链接,并且获取红包封面序列号
  • ¥100 微信小程序跑脚本授权的问题
  • ¥100 房产抖音小程序苹果搜不到安卓可以付费悬赏
  • ¥15 STM32串口接收问题