TypeError：无法设置未定义或空引用的属性“道具”[重复]

Question

我无法弄清楚如何解决这个错误，以前它不存在。如果我试图制作构造函数。

之前我已经两次导入 React 从“反应”导入反应； 从“反应”导入反应，{组件}； 因为那里有错误。为了更正它，我从代码中删除了 1 个导入。

import React,{Component} from 'react';
import './App.css';


class App extends Component() {
  constructor(props){

  }
  render() {
  return (
    <div className="App">
      <table className="titleBar">
        <tbody>
          <tr>
            <td>
              <img alt="app icon" width="50" src="primary_green.svg"/>
            </td>
            <td width="8"/>
            <td>
              <h1>MovieDb Search</h1>
            </td>
          </tr>
        </tbody>
      </table>
      <input style={{
        fontSize: 24,
        display: 'block',
        width: '99%',
        paddingTop: 8,
        paddingBottom: 8,
        paddingLeft: 16
      }} placeholder="Enter Search Term"/>
    </div>
  );
 }
}

export default App;


×
TypeError: Unable to set property 'props' of undefined or null reference
Component
C:/Users/Admin/Desktop/React_Projects/movies_search/node_modules/react/cjs/react.development.js:298
  295 |  */
  296 | 
  297 | function Component(props, context, updater) {
> 298 |   this.props = props;
      | ^
  299 |   this.context = context; // If a component has string refs, we will assign a different object later.
  300 | 
  301 |   this.refs = emptyObject; // We initialize the default updater but the real one gets injected by the
View compiled
./src/App.js
C:/Users/Admin/Desktop/React_Projects/movies_search/src/App.js:6
  3 | import './App.css';
  4 | 
  5 | 
> 6 | class App extends Component() {
  7 |   constructor(props){
  8 | 
  9 |   }
View compiled
__webpack_require__
C:/Users/Admin/Desktop/React_Projects/movies_search/webpack/bootstrap:781
  778 | };
  779 | 
  780 | // Execute the module function
> 781 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^
  782 | 
  783 | // Flag the module as loaded
  784 | module.l = true;
View compiled
fn
C:/Users/Admin/Desktop/React_Projects/movies_search/webpack/bootstrap:149
  146 |         );
  147 |         hotCurrentParents = [];
  148 |     }
> 149 |     return __webpack_require__(request);
      | ^
  150 | };
  151 | var ObjectFactory = function ObjectFactory(name) {
  152 |     return {
View compiled
./src/index.js
http://localhost:3000/static/js/main.chunk.js:263:22
__webpack_require__
C:/Users/Admin/Desktop/React_Projects/movies_search/webpack/bootstrap:781
  778 | };
  779 | 
  780 | // Execute the module function
> 781 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^
  782 | 
  783 | // Flag the module as loaded
  784 | module.l = true;
View compiled
fn
C:/Users/Admin/Desktop/React_Projects/movies_search/webpack/bootstrap:149
  146 |         );
  147 |         hotCurrentParents = [];
  148 |     }
> 149 |     return __webpack_require__(request);
      | ^
  150 | };
  151 | var ObjectFactory = function ObjectFactory(name) {
  152 |     return {
View compiled
0
http://localhost:3000/static/js/main.chunk.js:390:1
__webpack_require__
C:/Users/Admin/Desktop/React_Projects/movies_search/webpack/bootstrap:781
  778 | };
  779 | 
  780 | // Execute the module function
> 781 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^
  782 | 
  783 | // Flag the module as loaded
  784 | module.l = true;
View compiled
checkDeferredModules
C:/Users/Admin/Desktop/React_Projects/movies_search/webpack/bootstrap:45
  42 |  }
  43 |  if(fulfilled) {
  44 |      deferredModules.splice(i--, 1);
> 45 |      result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
     | ^
  46 |  }
  47 | }
  48 | return result;
View compiled
webpackJsonpCallback
C:/Users/Admin/Desktop/React_Projects/movies_search/webpack/bootstrap:32
  29 |  deferredModules.push.apply(deferredModules, executeModules || []);
  30 | 
  31 |  // run deferred modules when all chunks ready
> 32 |  return checkDeferredModules();
     | ^
  33 | };
  34 | function checkDeferredModules() {
  35 |  var result;
View compiled
Global code
http://localhost:3000/static/js/main.chunk.js:1:2
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.

Answer 1

定义App 时，您将Component 作为函数调用。改变

class App extends Component() {

到

class App extends Component {

此外，如果 constructor 为空，则删除它是有意义的。