web-dev-qa-db-fra.com

Impossible d'accéder à l'état dans la fonction

J'utilise React Native Pour mon application, et à un moment donné, j'ai remarqué que je dois taper this.state.bar[this.state.foo][SOME_NUMBER] À chaque fois, dans mes composants.

Cela fonctionne parfaitement, mais je veux rendre mon code plus propre en appelant une fonction à la place. J'ai donc construit ceci:

function txt(n){
    return this.state.bar[this.state.foo][n];
}

Cependant, lorsque j'exécute cela dans le client Expo, j'obtiens l'erreur suivante:

TypeError: undefined is not an object (evaluating 'this.state.bar')

This error is located at:
    in App...
    ....

Voici tout mon code.

import React, 
    { Component } 
from 'react';
import { 
     ... 
} from 'react-native';

export default class App extends React.Component {
    state = {
        foo: 'ABC',
        bar: {
            'ABC': [
                '...',
                '...',
                '...'
            ]
        }
    };
    render() {
        function txt(n){
            return this.state.bar[this.state.foo][n];
        }
        return (
            <View>
                ...  
            </View>
        );
    }
}

J'ai essayé de placer la fonction text() en dehors de la classe App, mais j'ai eu la même erreur.

Lorsque je l'ai placé en dehors de render() dans App, j'ai eu une erreur unexpected token.

Lorsque j'ai défini this.state Dans une constructor(props) et placé text() dans la constructor, j'ai obtenu ReferenceError: Can't find variable: text

javascriptreactjsreact-nativeexpo
4
Mrigank Pawagi

Votre problème est lié à la portée.

La this à laquelle vous essayez d'accéder à l'intérieur de la fonction txt() pointe vers sa propre this, et non le composant externe this.

Il existe plusieurs façons de résoudre ce problème. en voici quelques uns:

Utiliser les fonctions fléchées

Vous pouvez transformer txt en une fonction de flèche pour utiliser le this externe:

render() {
    const txt = (n) => {
        return this.state.bar[this.state.foo][n];
    }
    return (
        <View>
            ...  
        </View>
    );
}

Vous pouvez lier la fonction pour utiliser le this externe

render() {
    function _txt(n){
        return this.state.bar[this.state.foo][n];
    }


    const txt = _txt.bind(this);

    return (
        <View>
            ...  
        </View>
    );
}

Vous pouvez créer une variable supplémentaire qui pointe vers le this externe

render() {
    const self = this;
    function txt(n){
        return self.state.bar[self.state.foo][n];
    }
    return (
        <View>
            ...  
        </View>
    );
}

D'autres approches

  • Vous pouvez déplacer la fonction txt vers l'extérieur de la fonction de rendu et la lier au composant this.
  • Vous pouvez utiliser une fonction de flèche à l'intérieur du bloc de classe de composant, qui semblera avoir été liée au this du composant.
  • Vous pouvez passer l'état en tant que paramètre à la fonction

... et je suis sûr qu'il existe plusieurs autres façons de résoudre ce problème. Vous avez juste besoin de savoir quand vous utilisez le this ou un autre this du composant.

8
Sergio Moura

Quelques problèmes ici. Tout d'abord, vous devez lier la fonction text à la classe du constructeur. Vous devez également déplacer la fonction text hors de la méthode de rendu et l'ajouter en tant que méthode de classe (pas de function devant le nom de la fonction):

import React,
{ Component }
  from 'react';
import {
...
} from 'react-native';

export default class App extends React.Component {

  constructor () {
    super();
    this.state = {
      foo: 'ABC',
      bar: {
        'ABC': [
          '...',
          '...',
          '...'
        ]
      }
    };
    this.text = this.text.bind(this);
  }

  text (n) {
    return this.state.bar[this.state.foo][n];
  }

  render() {
    return (
      <View>
        ...
      </View>
    );
  }
}
1
Chase DeAnda