React.createElement: type ne doit pas être nul, indéfini .. Lors de la création/rendu

Question

Donc l'erreur complète est la suivante ... Je ne sais pas pourquoi je reçois cette erreur, je pensais avoir créé mon composant correctement mais peut-être un autre œil peut voir ce que je fais mal.

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;

Je suis en mesure d'afficher le journal, mais il ne veut pas rendre le composant. Est-ce que je crée des composants de manière incorrecte? Merci d'avance pour votre aide!

Answer 1

L'importation est incorrecte. AddProductStepper est l'exportation par défaut du module. Vous devez importer ainsi comme une exportation par défaut:

import AddProductStepper from './AddProductStepper'; 

La raison pour laquelle vous avez obtenu l'erreur est parce que vous avez tenté d'importer le export du nom, qui n'existe pas dans le module. Cela a donné indéfini, donc l'erreur.