React, ES6 – getInitialState a été défini sur une classe JavaScript simple

J’ai le composant suivant ( radioOther.jsx ):

  'use ssortingct'; //module.exports = <-- omitted in update class RadioOther extends React.Component { // omitted in update // getInitialState() { // propTypes: { // name: React.PropTypes.string.isRequired // } // return { // otherChecked: false // } // } componentDidUpdate(prevProps, prevState) { var otherRadBtn = this.refs.otherRadBtn.getDOMNode(); if (prevState.otherChecked !== otherRadBtn.checked) { console.log('Other radio btn clicked.') this.setState({ otherChecked: otherRadBtn.checked, }); } } onRadChange(e) { var input = e.target; this.setState({ otherChecked: input.checked }); } render() { return (  ) } }; 

Avant d’utiliser ECMAScript6, tout allait bien, maintenant je reçois 1 erreur, 1 avertissement et j’ai une question de suivi:

Erreur: UnCaught TypeError: Impossible de lire la propriété ‘otherChecked’ de null

Attention: getInitialState a été défini sur RadioOther, une classe JavaScript simple. Ceci est uniquement pris en charge pour les classes créées à l’aide de React.createClass. Voulez-vous dire définir une propriété d’état à la place?


  1. Quelqu’un peut-il voir où se trouve l’erreur, je sais que c’est dû à l’instruction conditionnelle dans le DOM, mais apparemment je ne déclare pas sa valeur initiale correctement?

  2. Dois-je faire getInitialState statique

  3. Où est l’endroit approprié pour déclarer mes proptypes si getInitialState n’est pas correct?

METTRE À JOUR:

  RadioOther.propTypes = { name: React.PropTypes.ssortingng, other: React.PropTypes.bool, options: React.PropTypes.array } module.exports = RadioOther; 

@ssorallen, ce code:

  constructor(props) { this.state = { otherChecked: false, }; } 

produit "Uncaught ReferenceError: this is not defined" , et corrige en bas

  constructor(props) { super(props); this.state = { otherChecked: false, }; } 

mais maintenant, cliquer sur l’autre bouton génère maintenant une erreur:

Uncaught TypeError: Cannot read property 'props' of undefined

    • getInitialState n’est pas utilisé dans les classes ES6. Au lieu de cela, affectez this.state au constructeur.
    • propTypes doit être une variable de classe statique ou atsortingbuée à la classe, il ne doit pas être affecté aux instances du composant.
    • Les méthodes membres ne sont pas «liées automatiquement» dans les classes ES6. Pour les méthodes utilisées comme rappels, utilisez des initialiseurs de propriétés de classe ou affectez des instances liées dans le constructeur.
     export default class RadioOther extends React.Component { static propTypes = { name: React.PropTypes.ssortingng.isRequired, }; constructor(props) { super(props); this.state = { otherChecked: false, }; } // Class property initializer. `this` will be the instance when // the function is called. onRadChange = () => { ... }; ... } 

    Voir plus dans la documentation de React sur les classes ES6: Conversion d’une fonction en classe

    Ajout à la réponse de Ross .

    Vous pouvez également utiliser la nouvelle fonction de flèche ES6 sur la propriété onChange

    C’est fonctionnellement équivalent à définir this.onRadChange = this.onRadChange.bind(this); dans le constructeur mais est plus concis à mon avis.

    Dans votre cas, le bouton radio ressemblera à celui ci-dessous.

      this.onRadChange(e)} name={this.props.name} value="other"/> 

    Mettre à jour

    Cette méthode “plus concise” est moins efficace que les options mentionnées dans la réponse de @Ross Allen car elle génère une nouvelle fonction chaque fois que la méthode render() est appelée

    Si vous utilisez babel-plugin-transform-class-properties ou babel-preset-stage-2 (ou stage-1 ou stage-0), vous pouvez utiliser cette syntaxe:

     class RadioOther extends React.Component { static propTypes = { name: React.PropTypes.ssortingng, ... }; state = { otherChecked: false, }; onRadChange = () => { ... }; ... }