web-dev-qa-db-fra.com

Uncaught TypeError: impossible de lire la propriété 'toUpperCase'

Je suis nouveau sur React et Javascript et j'essaye de rendre le composant React suivant:

'use strict';
var React = require('react');
import ToReadList from './toreadlist.js';

var ToRead = React.createClass({
getInitialState: function() {
    return { bookTitles: [] };
},
handleSubmit: function(e) {
    e.preventDefault();
    this.state.bookTitles.Push(React.findDOMNode(this.refs.bookTitleInput).value.trim());
    this.setState({items: this.state.bookTitles});
},
render: function() {
    return (<div>
        <form onSubmit={this.handleSubmit}><input type="text" ref="bookTitleInput"></input>
            <input type="submit"></input></form>
            <ToReadList bookTitles={this.state.bookTitles} />
    </div>
           );
}
});

module.exports = ToRead;

Mais j'ai l'erreur suivante sur ma console: " Uncaught TypeError: Impossible de lire la propriété 'toUpperCase' of undefined "

J'ai essayé de déboguer (parce que l'erreur est obscure pour moi et qu'aucune ligne de mon code n'est indiquée) et j'ai remarqué que cette ligne particulière:

this.state.bookTitles.Push()

provoque l'erreur.

S'il vous plaît aider!

Edit L'erreur est provoquée par une fonction d'injection de webpack var:

function autoGenerateWrapperClass(type) {
      return ReactClass.createClass({
        tagName: type.toUpperCase(),
        render: function() {
          return new ReactElement(
            type,
            null,
            null,
            null,
            null,
            this.props
          );
        }
      });
    }
javascriptreactjswebpack
5
Mayas

Mes excuses pour la mauvaise qualité de ce post.

J'ai résolu le problème.

Enfin, le problème provient du composant inclus:

<ToReadList bookTitles={this.state.bookTitles} />

L'erreur est apparue lorsque this.state.bookTitles.Push(React.findDOMNode(this.refs.bookTitleInput).value.trim()); a été appelé car bookTitles déclenche l'erreur à l'intérieur du composant lorsqu'il n'est pas vide (i.e <ToReadList bookTitles={["mastery", "foundation"]} /> déclenche exactement la même erreur).

Le code correspondant à la question est en tant que tel:

'use strict';
var React = require('react');
import {ToReadListItem} from './todoreadlistitem.js';

var ToReadList = React.createClass({
    render: function() {
        return (<ul>
            {this.props.bookTitles.map(function(bookTitle){ 
                return (<li>
                    <ToReadListItem bookTitle={bookTitle} isChecked={false}/>
                </li>);
            })}
        </ul>);
    }

});

module.exports = ToReadList;

Changer cette ligne:

import {ToReadListItem} from './todoreadlistitem.js';

Pour ça:

import ToReadListItem from './todoreadlistitem.js';

Je sais que ce n’est pas une bonne idée de mélanger la syntaxe es6 avec une syntaxe plate, mais je me permets de le faire car l’application est conçue à des fins d’expérimentation.

J'espère que j'ai aidé à rendre les choses plus claires.

5
Mayas

findDOMNode() utilise la fonction toUpperCase() qui est appelée en fait sur un null. 

Exemple 

var x = null
x.toUpperCase()// results in this error.

Si vous pouviez publier le code findDOMNode(), nous pourrions retracer l'erreur.

OU

Assurez-vous que la toUpperCase() est appelée sur un non-null object.

3
Uma Kanth

Je suppose que le problème vient du fait que vous essayez de modifier directement l’état. Essaye ça:

var newBookTitles = this.state.bookTitles;
var value = React.findDOMNode(this.refs.bookTitleInput).value.trim();
newBookTitles.Push(value);
 this.setState({bookTitles: newBookTitles});

J'espère que cela résoudra votre problème.

2
Phi Nguyen

Importer un composant avec un nom incorrect m'a donné la même erreur.

Je l'avais importé en tant que var AreaChart = Charts.AreaChart;

où comme dans Charts.js, il a été exporté avec un petit 'c': 

Areachart: Areachart

Le changer en AreaChart: Areachart dans Charts.js lors de l'exportation l'a résolu.

0
avck