问题遇到的现象和发生背景
我用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:
- You might have mismatching versions of React and the renderer (such as React DOM)
- You might be breaking the Rules of Hooks
- 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"))
运行结果及报错内容
我的解答思路和尝试过的方法
我用的教程是react17 然后我下载的是18,但已经降成了17。 根据教程来编写会出现此类错误。根据ant design官方文档来编写也还是出现此类错误。 网上查了各种方法,但都不管用。
我想要达到的结果
不出现截图中的错误