TypeError：无法读取ReactJS中未定义的属性'props'

如何解决TypeError：无法读取ReactJS中未定义的属性'props'

我正在尝试使用ReactJS创建一个简单的应用程序，但出现此错误，我不知道为什么。

这是我的App.js。

import React from 'react';
import { connect } from 'react-redux';
import Category from './components/Category';
//import News from './components/Noticias';
import './App.css';

function App() {
  const { categories } = this.props;
  return (
    <div className="App">
      <Category categories={categories} />
      {/*<News />*/}
    </div>
  );
}

const mapStatetoProps = state => {
  const { Categorias: {data: categories}} = state;

  return {
    categories,}
}

const mapdispatchToProps = dispatch => ({})

export default connect(mapStatetoProps,mapdispatchToProps)(App);

我正在node.js v14.4.0下工作，这是我的package.json，用于检查反应版本，redux版本等。

{
  "name": "noticias","version": "0.1.0","private": true,"dependencies": {
    "@testing-library/jest-dom": "^4.2.4","@testing-library/react": "^9.3.2","@testing-library/user-event": "^7.1.2","react": "^16.13.1","react-dom": "^16.13.1","react-redux": "^7.2.1","react-scripts": "3.4.3","redux": "^4.0.5","redux-form": "^8.3.6"
  },"scripts": {
    "start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"
  },"eslintConfig": {
    "extends": "react-app"
  },"browserslist": {
    "production": [
      ">0.2%","not dead","not op_mini all"
    ],"development": [
      "last 1 chrome version","last 1 firefox version","last 1 safari version"
    ]
  }
}

我正在检查，但没有找到错误，您能帮我吗？

解决方法

您可以写这个，

function App({ categories }) {
  // const { categories } = this.props;
  return (
    <div className="App">
      <Category categories={categories} />
      {/*<News />*/}
    </div>
  );
}