为什么会出现“无法读取未定义的属性” props”？

Question

在我的create-react-app / redux中，我有一个“连接的组件”：

import React from "react";
import "./App.css";
import { connect } from "react-redux";

function App() {
  debugger;
  const { datas } = this.props;

  debugger;
  return <div className="App">{datas}}</div>;
}

const mapStateToProps = state => {
  return {
    datas: state
  };
};

// const mapDispatchToProps = dispatch => {
//   return {
//     onRequestDog: () => dispatch({ type: "API_CALL_REQUEST_POST" })
//   };
// };

export default connect(
  mapStateToProps,
  {}
)(App);

Redux在index.js中配置：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import createSagaMiddleware from "redux-saga";
import { createStore, applyMiddleware } from "redux";
import { watcherSaga } from "./sagas";
import { Provider } from "react-redux";
import reducer from './redux.js'

//hookup saga
// create the saga middleware
const sagaMiddleware = createSagaMiddleware();

// dev tools middleware
const reduxDevTools =
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__();

// create a redux store with our reducer above and middleware
let store = createStore(reducer, reduxDevTools );

// run the saga
//sagaMiddleware.run(watcherSaga);


ReactDOM.render(<Provider store={store}>
    <App />
  </Provider>, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();

当我运行此应用程序时，我会在控制台中看到以下内容：

无法读取未定义的属性“ props”

如何调试此问题/原因是什么？

Answer 1

this是基于类的组件：

function App(props) {
  debugger;
  const { datas } = props;

  debugger;
  return <div className="App">{datas}</div>;
}