gpt4 book ai didi

javascript - 无法访问函数内的状态

转载 作者:行者123 更新时间:2023-12-03 13:28:40 26 4
gpt4 key购买 nike

我正在为我的应用程序使用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() 之外时,出现了意外 token 错误。

当我在 constructor(props) 中定义 this.state 并将 text() 放置在 constructor 中时>,我得到ReferenceError:找不到变量:文本

最佳答案

您的问题在于范围界定。

您尝试在 txt() 函数内部访问的 this 指向其自己的 this,而不是外部组件this

有多种方法可以解决此问题。这里有一些:

使用箭头函数

您可以将 txt 转换为箭头函数以使用外部 this:

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

您可以绑定(bind)函数以使用外部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 函数移至渲染函数之外,并将其绑定(bind)到组件 this
  • 您可以在组件类 block 内使用箭头函数,这看起来就像您已将其绑定(bind)到组件的 this
  • 您可以将状态作为参数传递给函数

...我确信还有其他几种方法可以解决此问题。您只需要知道何时使用组件的 this 或其他一些 this

关于javascript - 无法访问函数内的状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52894546/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com