无法访问函数内部的状态

Posted 2023-02-22

【中文标题】无法访问函数内部的状态

【英文标题】：Cannot access State inside Function

【发布时间】：2019-03-24 11:23:12

【问题描述】：

我在我的应用程序中使用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 类之外，但得到了同样的错误。

当我将它放在App 中的render() 之外时，出现unexpected token 错误。

当我在constructor(props) 中定义this.state 并将text() 放在constructor 中时，我得到了ReferenceError: Can't find variable: text

【问题讨论】：

使用数组函数

@Thomas 我相信你的意思是arrow-function？

【参考方案1】：

您的问题是范围界定。

您尝试在txt() 函数内部访问的this 指向它自己的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。

【讨论】：

非常感谢！像魅力一样工作！我使用了第二种方法并添加了const text = _text.bind(this) 并且有效！基本上，我知道我必须使用bind()，但我不明白在哪里以及如何使用！

这样绑定它的“问题”是（或者甚至在渲染函数中创建函数）是每次渲染组件时都创建一个新的函数元素。这是最好不要在渲染函数中为非常大的组件创建函数的原因之一。

我明白你的意思 - 幸好我的功能很小！谢谢！

【参考方案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>
    );
  

【讨论】：

给Can't Find variable: text

@MrigankPawagi 通过使用 Chase 的答案，您需要在 render 函数内使用 this.text，因为该函数不能作为 render 函数内的关键字使用。您可以在渲染函数的顶部执行 const text = this.text 并从那时起在不使用 this 的情况下使用它。