Невозможно получить доступ к состоянию внутри функции

Question

Я использую React Native для своего приложения, и в какой-то момент я заметил, что мне приходится каждый раз вводить this.state.bar[this.state.foo][SOME_NUMBER] в своих компонентах.

Это прекрасно работает, но я хочу сделать мой код чище, вместо этого вызывая функцию.Итак, я построил это:

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

Однако, когда я запускаю это в Expo клиенте, я получаю следующую ошибку:

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

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

Вот весь мой код.

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>
        );
    }
}

Я попытался поместить функцию text() вне класса App, но получил ту же ошибку.

Когда я поместил ее вне render() в App, я получилошибка unexpected token.

Когда я определил this.state в constructor(props) и поместил text() в constructor, я получил ReferenceError: Can't find variable: text

Answer 1

Ваша проблема в области видимости.

this, к которому вы пытаетесь получить доступ внутри функции txt(), указывает на свой собственный this, а не на внешний компонент this.

Есть несколько способов исправить это.Вот некоторые из них:

Использование функций со стрелками

Вы можете преобразовать txt в функцию со стрелками для использования внешних this:

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

Вы можете связатьфункция для использования внешней this

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


    const txt = _txt.bind(this);

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

Вы можете создать дополнительную переменную, которая указывает на внешнюю this

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

Другие подходы

• Вы можете переместить функцию txt за пределы функции рендеринга и связать ее с компонентом this.
• Вы можете использовать функцию стрелки внутри блока класса компонента, который будет выглядеть так, как будто выпривязать его к this.
• . Вы можете передать состояние в качестве параметра функции

... и я уверен, что есть несколько других способовисправить это поведение.Вам просто нужно знать, когда вы используете компонент this или какой-либо другой this.

Answer 2

Несколько вопросов здесь.Во-первых, вам нужно связать функцию text с классом в конструкторе.Вам также необходимо переместить функцию text из метода рендеринга и добавить ее как метод класса (без function перед именем функции):

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>
    );
  }
}