2017-10-04 3 views
1

Je suivais un tutoriel React here. Dans la quatrième leçon, j'ai créé une section App.propTypes. Quand je cours le code React me donne une erreur en disant TypeError: Cannot read property 'string' of undefined quand j'ouvre ma console l'erreur indique . Je suis alors allé de l'avant et installé le paquet npm prop-types et l'ai importé dans mon code, mais je me retrouve toujours avec la même erreur. Je vais inclure mon code ci-dessous. J'utilise la version de noeud v8.5.0. Peut-être que je devrais essayer de trouver la version du noeud que le tutoriel utilise pour que ma version de React corresponde, mais je ne sais même pas si je peux le trouver, je voudrais que les tutoriels spécifient ce genre de choses, ça ressemble à ça Le tutoriel a 2 ans, ce qui explique probablement pourquoi j'ai cette divergence.React.PropTypes est dépréciée et moi avons installé prop-types package

src/app.js

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

class App extends React.Component{ 
    render(){ 
    let txt = this.props.txt 
    return (
     <div> 
     <h1>{txt}</h1> 
     <b>bold</b> 
     </div> 
    ) 
    } 
} 

App.propTypes = { 
    txt: React.PropTypes.string, 
    cat: React.PropTypes.number.isRequired 
} 

export default App; 

/src/index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App'; 

ReactDOM.render(
    <App cat={5} txt="this is the prop value" />, 
    document.getElementById('root') 
); 
+2

'txt: React.PropTypes.string' =>' txt: PropTypes.string' –

Répondre

3

changement

txt: React.PropTypes.string, 
cat: React.PropTypes.number.isRequired 

à

txt: PropTypes.string, 
cat: PropTypes.number.isRequired 

Vous avez PropTypes importés PropTypes de 'prop-types' donc il n'y a pas besoin d'utiliser PropTypes comme propriété de React. L'utilisation de PropTypes en tant que propriété de React a été dépréciée il y a quelques mois.

De plus, vous avez un chat marqué comme isRequired mais ne l'utilisez pas dans votre composant App. Donc, cela affichera une erreur de charpie.

Autre que cela, je ne suis pas sûr de ce que la question est. J'ai couru votre code source sur ma machine et il est sorti ok.

1

Si vous utilisez le paquet prop-types, vous pouvez le faire:

App.propTypes = { 
    txt: PropTypes.string, 
    cat: PropTypes.number.isRequired 
} 

En outre, l'erreur de votre ge C'est parce que vous n'avez pas de chat qui puisse entrer n'importe où.

-3

Peut-être que vous avez besoin d'utiliser ce paquet here

0

J'ai suivi le même tutoriel et résolu en procédant comme suit.

partie 1

  • prop-types installent

    1. sudo npm -i -g prop-types

    2. dans app.js

      • assurez-vous que import PropTypes from 'prop-types'; est au-dessus du fichier.
    3. changement

      App.propTypes = { txt: React.PropTypes.string, cat: React.PropTypes.number.isRequired }

      à

      App.propTypes = { txt: PropTypes.string,//------------ remove React cat: PropTypes.number.isRequired//-- remove React }

partie 2

  • Réinstaller node_modules

    1. supprimer package- verrouillage .json PAS package.json
    2. run sudo npm install
    3. npm start

Réf. https://www.npmjs.com/package/prop-types

Réf. https://github.com/facebookincubator/create-react-app/issues/2534