陣營-引導：類型錯誤：無法獲取的未定義或空引用

我在看看從React-Bootstrap的COMPONENTES，和我想要測試的一種形式財產「布爾」：陣營-引導：類型錯誤：無法獲取的未定義或空引用

import React, { Component, PropTypes } from 'react'; 
import ReactDOM from 'react-dom'; 
import { Form, FormGroup, Col, FormControl, Checkbox, ControlLabel, Button } from "react-bootstrap"; 

export default class LoginForm extends React.Component { 
    render() { 
     return (
      <div class="row content"> 
       <Form horizontal> 
        <FormGroup controlId="formHorizontalEmail"> 
         <Col componentClass={ControlLabel} sm={2}> 
          Email 
        </Col> 
         <Col sm={10}> 
          <FormControl type="email" placeholder="Email" /> 
         </Col> 
        </FormGroup> 

        <FormGroup controlId="formHorizontalPassword"> 
         <Col componentClass={ControlLabel} sm={2}> 
          Password 
        </Col> 
         <Col sm={10}> 
          <FormControl type="password" placeholder="Password" /> 
         </Col> 
        </FormGroup> 

        <FormGroup> 
         <Col smOffset={2} sm={10}> 
          <Checkbox>Remember me</Checkbox> 
         </Col> 
        </FormGroup> 

        <FormGroup> 
         <Col smOffset={2} sm={10}> 
          <Button type="submit"> 
           Sign in 
        </Button> 
         </Col> 
        </FormGroup> 
       </Form> 
      </div> 
     ); 
    } 

}

似乎一切正常，除了事實，我得到這個荒謬的錯誤，每次我試圖使用從反應的自舉東西：

TypeError: Unable to get property 'bool' of undefined or null reference 
./node_modules/react-bootstrap/lib/PanelGroup.js 
E:/Insanity/Web/segui_info/node_modules/react-bootstrap/lib/PanelGroup.js:25 
    22 | 
    23 | var _utilsValidComponentChildren2 = _interopRequireDefault(_utilsValidComponentChildren); 
    24 | 
> 25 | var PanelGroup = _react2['default'].createClass({ 
    26 | displayName: 'PanelGroup', 
    27 | 
    28 | propTypes: { 
View compiled 
__webpack_require__ 
E:/Insanity/Web/segui_info/webpack/bootstrap a1ffbf39f7aa54dab00b:669 
    666 | }; 
    667 | 
    668 | // Execute the module function 
> 669 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); 
    670 | 
    671 | // Flag the module as loaded 
    672 | module.l = true; 
View compiled 
fn 
E:/Insanity/Web/segui_info/webpack/bootstrap a1ffbf39f7aa54dab00b:87 
    84 |  console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId); 
    85 |  hotCurrentParents = []; 
    86 | } 
> 87 | return __webpack_require__(request); 
    88 | }; 
    89 | var ObjectFactory = function ObjectFactory(name) { 
    90 | return { 
View compiled 
./node_modules/react-bootstrap/lib/Accordion.js 
E:/Insanity/Web/segui_info/node_modules/react-bootstrap/lib/Accordion.js:13 
    10 | 
    11 | var _react2 = _interopRequireDefault(_react); 
    12 | 
> 13 | var _PanelGroup = require('./PanelGroup'); 
    14 | 
    15 | var _PanelGroup2 = _interopRequireDefault(_PanelGroup); 
    16 | 
View compiled 
__webpack_require__ 
E:/Insanity/Web/segui_info/webpack/bootstrap a1ffbf39f7aa54dab00b:669 
    666 | }; 
    667 | 
    668 | // Execute the module function 
> 669 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); 
    670 | 
    671 | // Flag the module as loaded 
    672 | module.l = true; 
View compiled 
fn 
E:/Insanity/Web/segui_info/webpack/bootstrap a1ffbf39f7aa54dab00b:87 
    84 |  console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId); 
    85 |  hotCurrentParents = []; 
    86 | } 
> 87 | return __webpack_require__(request); 
    88 | }; 
    89 | var ObjectFactory = function ObjectFactory(name) { 
    90 | return { 
View compiled 
./node_modules/react-bootstrap/lib/index.js 
E:/Insanity/Web/segui_info/node_modules/react-bootstrap/lib/index.js:9 
    6 | 
    7 | exports.__esModule = true; 
    8 | 
> 9 | var _Accordion2 = require('./Accordion'); 
    10 | 
    11 | var _Accordion3 = _interopRequireDefault(_Accordion2); 
    12 | 
View compiled 
__webpack_require__ 
E:/Insanity/Web/segui_info/webpack/bootstrap a1ffbf39f7aa54dab00b:669 
    666 | }; 
    667 | 
    668 | // Execute the module function 
> 669 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); 
    670 | 
    671 | // Flag the module as loaded 
    672 | module.l = true; 
View compiled 
fn 
E:/Insanity/Web/segui_info/webpack/bootstrap a1ffbf39f7aa54dab00b:87 
    84 |  console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId); 
    85 |  hotCurrentParents = []; 
    86 | } 
> 87 | return __webpack_require__(request); 
    88 | }; 
    89 | var ObjectFactory = function ObjectFactory(name) { 
    90 | return { 
View compiled 
./src/routes/admin.js 
http://localhost:3000/static/js/bundle.js:96514:22 
__webpack_require__ 
E:/Insanity/Web/segui_info/webpack/bootstrap a1ffbf39f7aa54dab00b:669 
    666 | }; 
    667 | 
    668 | // Execute the module function 
> 669 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); 
    670 | 
    671 | // Flag the module as loaded 
    672 | module.l = true; 
View compiled 
fn 
E:/Insanity/Web/segui_info/webpack/bootstrap a1ffbf39f7aa54dab00b:87 
    84 |  console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId); 
    85 |  hotCurrentParents = []; 
    86 | } 
> 87 | return __webpack_require__(request); 
    88 | }; 
    89 | var ObjectFactory = function ObjectFactory(name) { 
    90 | return { 
View compiled 
./src/App.js 
http://localhost:3000/static/js/bundle.js:95293:22 
__webpack_require__ 
E:/Insanity/Web/segui_info/webpack/bootstrap a1ffbf39f7aa54dab00b:669 
    666 | }; 
    667 | 
    668 | // Execute the module function 
> 669 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); 
    670 | 
    671 | // Flag the module as loaded 
    672 | module.l = true; 
View compiled 
fn 
E:/Insanity/Web/segui_info/webpack/bootstrap a1ffbf39f7aa54dab00b:87 
    84 |  console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId); 
    85 |  hotCurrentParents = []; 
    86 | } 
> 87 | return __webpack_require__(request); 
    88 | }; 
    89 | var ObjectFactory = function ObjectFactory(name) { 
    90 | return { 
View compiled 
./src/index.js 
http://localhost:3000/static/js/bundle.js:96312:22 
__webpack_require__ 
E:/Insanity/Web/segui_info/webpack/bootstrap a1ffbf39f7aa54dab00b:669 
    666 | }; 
    667 | 
    668 | // Execute the module function 
> 669 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); 
    670 | 
    671 | // Flag the module as loaded 
    672 | module.l = true; 
View compiled 
fn 
E:/Insanity/Web/segui_info/webpack/bootstrap a1ffbf39f7aa54dab00b:87 
    84 |  console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId); 
    85 |  hotCurrentParents = []; 
    86 | } 
> 87 | return __webpack_require__(request); 
    88 | }; 
    89 | var ObjectFactory = function ObjectFactory(name) { 
    90 | return { 
View compiled 
0 
http://localhost:3000/static/js/bundle.js:97408:1 
__webpack_require__ 
E:/Insanity/Web/segui_info/webpack/bootstrap a1ffbf39f7aa54dab00b:669 
    666 | }; 
    667 | 
    668 | // Execute the module function 
> 669 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); 
    670 | 
    671 | // Flag the module as loaded 
    672 | module.l = true; 
View compiled 
Anonymous function 
E:/Insanity/Web/segui_info/webpack/bootstrap a1ffbf39f7aa54dab00b:715 
    712 | __webpack_require__.h = function() { return hotCurrentHash; }; 
    713 | 
    714 | // Load entry module and return exports 
> 715 | return hotCreateRequire(0)(__webpack_require__.s = 0); 
    716 | 
    717 | 
    718 | 
View compiled 
Global code 
http://localhost:3000/static/js/bundle.js:1:11

來源

2017-10-16 Ericson Willians

你可以更具體地說明你在做什麼。這裏有很多代碼，並沒有太多的描述你做錯了什麼。 – nbkhope

這不是一個完整的答案，但只有你的代碼的示範和建議。您的代碼看起來很好（請參閱下面的示例）。
您也有類似的issue。
一個民間寫道：

My problem is caused by npm link. I have 2 libs(A and B) which are both depends on react-bootstrap. B depends on v0.28.3, A depends on v0.29.0. And B depends on A through npm link. It's weird that codes of A will use the packages under B's node_modules. Anyway, update B's package.json to use v0.29.0 solve the issue.

反正這裏是你的代碼運行良好：

const { Form, FormGroup, Col, FormControl, Checkbox, ControlLabel, Button } = ReactBootstrap; 
 
class LoginForm extends React.Component { 
 
    render() { 
 
    return (
 
     <div class="row content"> 
 
     <Form horizontal> 
 
      <FormGroup controlId="formHorizontalEmail"> 
 
      <Col componentClass={ControlLabel} sm={2}> 
 
       Email 
 
        </Col> 
 
      <Col sm={10}> 
 
       <FormControl type="email" placeholder="Email" /> 
 
      </Col> 
 
      </FormGroup> 
 

 
      <FormGroup controlId="formHorizontalPassword"> 
 
      <Col componentClass={ControlLabel} sm={2}> 
 
       Password 
 
        </Col> 
 
      <Col sm={10}> 
 
       <FormControl type="password" placeholder="Password" /> 
 
      </Col> 
 
      </FormGroup> 
 

 
      <FormGroup> 
 
      <Col smOffset={2} sm={10}> 
 
       <Checkbox>Remember me</Checkbox> 
 
      </Col> 
 
      </FormGroup> 
 

 
      <FormGroup> 
 
      <Col smOffset={2} sm={10}> 
 
       <Button type="submit"> 
 
       Sign in 
 
        </Button> 
 
      </Col> 
 
      </FormGroup> 
 
     </Form> 
 
     </div> 
 
    ); 
 
    } 
 

 
} 
 

 
ReactDOM.render(<LoginForm />, document.getElementById("root"));

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.31.3/react-bootstrap.min.js"></script> 
 
<div id="root"></div>

來源

2017-10-16 18:19:36

會給你正確的答案，因爲這的確是問題所在。出於一些不明確的原因，react-bootstrap從它的內部package.json和node modules文件夾中獲取它的依賴關係。我剛剛對此感到非常沮喪，以至於我放棄了。使用bootstrap編寫我自己的組件在類名稱和其他方面，頭痛是不值得的。 –

如果錯誤是，proptype那麼相關的您可能需要導入的道具類型..

import React from 'react'; 
    import PropTypes from 'prop-types'

來源

2018-01-11 06:18:27 Imran

陣營-引導：類型錯誤：無法獲取的未定義或空引用

回答

相關問題