React.createElement：typeはnullではありません。未定義です。作成/レンダリング時

Question

したがって、完全なエラーは次のようになります。 なぜこのエラーが発生するのかわかりません。私が間違っていることを別の目で見ることができます。

import React, { PropTypes } from 'react'; 
 
import ReactDOM from 'react-dom'; 
 
import { 
 
    Step, 
 
    Stepper, 
 
    StepButton, 
 
} from 'material-ui/Stepper'; 
 
import RaisedButton from 'material-ui/RaisedButton'; 
 
import FlatButton from 'material-ui/FlatButton'; 
 

 
class AddProductStepper extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     stepIndex: 0 
 
    } 
 
    } 
 

 
    getStepContent(stepIndex) { 
 
    switch(stepIndex) { 
 
     case 0: 
 
     return 'Select campaign settings...'; 
 
     case 1: 
 
     return 'What is an ad group anyways?'; 
 
     case 2: 
 
     return 'This is the bit I really care about!'; 
 
     default: 
 
     return 'You\'re a long way from home sonny jim!'; 
 
    } 
 
    } 
 

 
    render() { 
 
    return(
 
     <div style={{ width: '100%', maxWidth: 700, margin: 'auto' }}> 
 
     <Stepper 
 
      linear={false} 
 
      activeStep = {this.state.stepIndex} 
 
     > 
 
      <Step> 
 
      <StepButton onClick={() => this.setState({stepIndex: 0})}> 
 
       Select campaign settings 
 
      </StepButton> 
 
      </Step> 
 
      <Step> 
 
      <StepButton onClick={() => this.setState({stepIndex: 1})}> 
 
       Create an ad group 
 
      </StepButton> 
 
      </Step> 
 
      <Step> 
 
      <StepButton onClick = {() => this.setState({stepIndex:2})}> 
 
       Create an ad 
 
      </StepButton> 
 
      </Step> 
 
     </Stepper> 
 
     <div> 
 
      <p>{this.getStepContent(this.state.stepIndex)}</p> 
 
      <div style={{ marginTop: 12 }}> 
 
      <FlatButton 
 
       label="Back" 
 
       disabled={this.state.stepIndex === 0} 
 
       onClick={() => this.setState({stepIndex:this.state.stepIndex - 1})} 
 
       style={{ marginRight: 12 }} 
 
      /> 
 
      <RaisedButton 
 
       label="Next" 
 
       disabled={this.state.stepIndex === 2} 
 
       primary={true} 
 
       onClick{() => { 
 
        this.setState({stepIndex:this.state.stepIndex+ 1}); 
 
        console.log(this.state); 
 
       } 
 
       } 
 
      /> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
    export default AddProductStepper;

<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>

import React, { PropTypes } from 'react'; 
 
import ReactDOM from 'react-dom'; 
 
import {AddProductStepper} from './AddProductStepper'; 
 

 
class AddProduct extends React.Component { 
 
    constructor(props) { 
 
    super(props); \t 
 
    } 
 

 
    render() { 
 
    return <AddProductStepper />; 
 
    } 
 
} 
 

 
export default AddProduct;

私は、ログを表示することができるよ、それはコンポーネントをレンダリングする必要はありません。コンポーネントを間違って作成していますか？ご協力いただきありがとうございます。

Answer 1

誤ってインポートしています。 AddProductStepperは、モジュールのデフォルトエクスポートです。あなたは、このようにデフォルトのエクスポートとしてインポートする必要があります。

import AddProductStepper from './AddProductStepper'; 

あなたはモジュール内に存在しないという名前の輸出をインポートしようとしたため、あなたがエラーを得た理由でした。これにより、未定義のエラーが発生しました。