TypeError:无法设置未定义或空引用的属性“ props”

时间:2019-06-12 14:46:11

标签: reactjs

我以前无法弄清楚该错误的解决方法。如果我试图创建构造函数。

以前我已经两次导入React 从'react'导入React; 从'react'导入React,{Component};  因为那里有错误。为了更正它,我从代码中删除了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.

1 个答案:

答案 0 :(得分:0)

在定义App时,您要调用Component作为一个函数。更改

class App extends Component() {

class App extends Component {

此外,如果constructor只是空的,则将其删除。