无法访问功能内部的状态

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()的{​​{1}}之外时，出现了App错误。

当我在unexpected token中定义this.state并将constructor(props)放在text()中时，我得到了constructor

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函数移至render函数之外，并将其绑定到组件this。
• 您可以在组件类块内使用箭头功能，这似乎已将其绑定到组件的this。
• 您可以将状态作为参数传递给函数

...而且我敢肯定还有其他几种方法可以解决此问题。您只需要知道何时使用组件的this或其他this。

Answer 2

这里有几个问题。首先，您需要将text函数绑定到构造函数中的类。您还需要将text函数移出render方法，并将其添加为类方法（函数名前不得包含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>
    );
  }
}