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 metadata提取的PDF元数据,如何转换为一个Excel
  • ¥15 关于arduino编程toCharArray()函数的使用
  • ¥100 vc++混合CEF采用CLR方式编译报错
  • ¥15 coze 的插件输入飞书多维表格 app_token 后一直显示错误,如何解决?
  • ¥15 vite+vue3+plyr播放本地public文件夹下视频无法加载
  • ¥15 c#逐行读取txt文本,但是每一行里面数据之间空格数量不同
  • ¥50 如何openEuler 22.03上安装配置drbd
  • ¥20 ING91680C BLE5.3 芯片怎么实现串口收发数据
  • ¥15 无线连接树莓派,无法执行update,如何解决?(相关搜索:软件下载)
  • ¥15 Windows11, backspace, enter, space键失灵