état d'accès de rendre la fonction

Question

donc je dois exécuter cette ligne de code:

var vehicles = this.state.vehicles; 

Dans la fonction render:

render: function(){...} 

Je reçois actuellement cette erreur:

Uncaught (in promise) TypeError: Cannot read property 'state' of undefined

Même si cette ligne fonctionne:

this.setState({vehicles: json}) 

Cela fait également partie du code:

getInitialState: function(){ 
    this.render = this.render.bind(this) 
    return { 
     vehicles: [] 
    } 
} 

Comment puis-je corriger cette erreur et accéder aux données?

Answer 1

Vous ne liez pas la fonction de rendu. Je suppose que vous créez un composant en utilisant React.createClass puisque vous utilisez getInitialState pour initialiser l'état. Avec React.createClass, React fait automatiquement la liaison pour vous.

Même si vous créez un composant en étendant React.Component, la méthode de rendu et les fonctions de cycle de vie sont automatiquement liées au contexte de la composante Réagir.

Votre fonction getInitialState sera simplement

getInitialState: function(){ 
    return { 
     vehicles: [] 
    } 
    } 

Un échantillon d'analyse snippet

var App = React.createClass({ 
 
    getInitialState: function() { 
 
     console.log(this); 
 
     return {count: 0} 
 
    }, 
 
    render: function() { 
 
     return <div>Count:{this.state.count}</div> 
 
    } 
 
}) 
 

 
ReactDOM.render(<App/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script> 
 
<div id="app"></div>

Answer 2

Pour utiliser this.setState, vous devez d'abord déclarer la variable d'état sur la référence this à l'intérieur de votre composant.

Vous faites cela dans le consturctor, comme ceci:

constructor(props) { 
    super(props); 
    this.state = {...}; 
} 

Vous pouvez en savoir plus sur l'état local dans REACT docs: Adding Local State to a Class.

Answer 3

Vous devez définir l'état initial, il semble que ce ne soit pas le cas, vous obtenez donc cette erreur.

class YourComponent extends PureComponent { 
    state = {}; // <-- Initialize the state 
} 

ou en utilisant le constructeur

class YourComponent extends PureComponent { 
    constructor(props) { 
    super(props); 
    this.state = {}; // <-- Initialize the state 
    } 
} 

ou en utilisant ES5 (Obsolète)

var YourComponent = React.createReactClass({ 

    getInitialState: function() { 
    return {}; // <-- Initialize the state 
    }, 

    // ... 

}); 

Answer 4

Il semble y avoir un problème de liaison de contexte.

Cannot read property 'state' of undefined

Cela signifie que this est indéfini. Je suppose que vous l'utilisez dans un gestionnaire de changement. Essayez de onChange={this.changeHandler.bind(this)}.