使用 ES6 箭头函数解决“TypeError: 无法读取未定义的属性‘<你的属性名称>’”
介绍
如果你是 React 开发人员或刚刚学习使用 JavaScript 编程，那么在尝试从 this关键字读取属性时，你可能会遇到这个可怕的错误：
TypeError: Cannot read property '<your property name>' of undefined
如果你在编写 React 时遇到此错误，则很有可能是你试图在另一个函数中使用一个函数，并试图在嵌套函数中访问this关键字。但为什么会发生这种情况？
本指南将深入介绍 JavaScript 中的函数作用域。您将了解此错误发生的原因以及如何修复它。
让我们开始吧。
问题和初步解决方案
假设你刚刚编写了一个如下所示的小型 React 组件：
class FishSpecies Extends React.Component {
constructor(props) {
super(props);
this.state = {
clickCount: 0
};
}
onFishClicked() {
this.setState(function(prevState, props) {
return { clickCount: prevState.clickCount + 1 };
});
}
render() {
return (
<ul>
{{ this.props.fish.map(function(fish) {
return <Fish name={fish.name} onClick={this.onFishClicked} />
})}}
</ul>
)
}
}
首先，这个组件看起来非常简单。这个组件所做的就是通过 props 接收鱼对象列表，并为每个对象渲染一个Fish组件，将几个 props 传递给每条鱼。但是，如果你创建这个组件并添加到真正的 React 应用中，它将失败。你将看到如下错误：
TypeError: Cannot read property 'onFishClicked' of undefined
哦不，可怕的 TypeError 出现了！那么，为什么会发生这种情况？此错误通知您this未定义。具体来说，onClick={this.onFishClicked}因这个原因而失败。此处代码无法访问this 的原因在于 JavaScript 中的作用域的工作方式。
从本质上讲，函数是 JavaScript 中的对象。在 JavaScript 中创建函数时，它会根据实例化的上下文获得自己的作用域。在这种情况下，实际上没有上下文，因此this实际上是未定义的！本质上，代码在 React 框架中以严格模式运行，因此不使用全局上下文，而完全不使用上下文。查看这些文档了解更多信息。
那么你该如何修复这个问题呢？其实，你有很多选择。在下一节中，我们将展示修复此错误的最佳和最现代的方法。
ES6 解决方案
所以你已经诊断出了问题。你需要确保你的函数可以访问类组件的this上下文！为此，你可以使用 ES6 箭头函数。
除了使代码更简洁易读之外，箭头函数还有另一个用途。虽然不是很明显，但箭头函数在上下文如何传递给函数方面发挥了重要作用。本质上，当您使用箭头语法声明一个函数时，您就是在告诉 JavaScript 代码将this的当前上下文绑定到正在创建的新函数中。这不是很明显，因为与使用.bind方法绑定this 的显式方式相比，这种绑定是隐式完成的。
让我们看看如何使用箭头函数来修复你的代码！
class FishSpecies Extends React.Component {
constructor(props) {
super(props);
this.state = {
clickCount: 0
}
}
onFishClicked() {
this.setState((prevState, props) => {
return { clickCount: prevState.clickCount + 1 };
});
}
render() {
return (
<ul>
{{ this.props.fish.map(fish => {
return <Fish name={fish.name} onClick={this.onFishClicked} />
})}}
</ul>
)
}
}
瞧！这只是对上述两个函数声明的简单更改，但现在您可怕的 TypeError 已消失，因为您在渲染函数中传递给Array.map的函数可以访问组件的this上下文。而这一切都只需通过更改您声明函数的方式即可实现。
结论
箭头函数是一种将this的当前上下文绑定到嵌套函数的强大方法。不幸的是，这个主要好处是隐式的，所以你永远不会通过查看它的用法来了解它。React 组件中的大多数（如果不是全部）函数声明都应声明为箭头函数。这样做将有助于您避免在this的上下文及其绑定到的内容方面产生混淆。
有关this关键字与函数作用域关系的更多信息，请查看Mozilla JavaScript 开发者文档。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~