react+antd项目遇到这个问题

Question

对react不熟，源码如下。

import React, { Component } from 'react';
import Header from "../../components/header/header";
import Footer from "../../components/footer/footer";
import {List} from "antd";
import './notice.scss'

const ListHeader = (
  <div className='latest-notice-header'>
    <span className='latest-notice-header-title'>最新公告</span>
  </div>
)

class Notice extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        {
          title: '规则更新公告',
          date: '05-13',
          year: '2020'
        },
        {
          title: '优选，大当家的安全漏洞知会',
          date: '05-13',
          year: '2020'
        },
        {
          title: '五一双倍积分活动公告',
          date: '05-13',
          year: '2020'
        },
        {
          title: '兑换礼品延迟发货公告',
          date: '05-13',
          year: '2020'
        },
        {
          title: '五一快乐&礼品更新知会',
          date: '05-13',
          year: '2020'
        }
      ]
    };
  }

  render() {
    console.log(this.state.data)

    return (
      <div>
        <Header current='notice'/>
        <div className='notice-wrap'>
          <List
            className='notice-list'
            size="large"
            header={ListHeader}
            bordered={false}
            locale={{emptyText: '暂无公告'}}
            dataSource={this.state.data}
            renderItem={(item) => (
              <List.Item>{item.title}</List.Item>
            )}
          />
        </div>
        <Footer/>
      </div>
    )
  }
}

export default Notice;

reat、react-dom版本也没有问题

List.Item这里的问题。有没有遇到这种情况的 ？

Answer 1

React Hooks 只能用在函数式组件内，通常这个报错就是把hooks函数用在了类里面，或者不是写在函数式组件内部的原因，你贴出来的代码没有问题，看一下是不是List、Header、Footer组件里面有问题