解构函数时无法设置未定义的属性 属性

Question

我遇到的问题不是需要修复的问题，所以我很好奇为什么此功能会发生变化。此代码在 Typescript 中，我也在使用 Mobx。

我有一个名为 GlobalPageState 的状态，带有 属性 selectedTab 和一个设置此 属性 的函数，名为 setSelectedTab

export default GlobalPageState extends State {
 @observable
 public selectedTab = string;

 @action
 public setSelectedTab(selectedTab: PageTab) {
  this.selectedTab = selectedTab;
 }
}

在我的 React 组件中，我解构了这些属性并这样引用它们：

const { selectedTab, setSelectedTab } = GlobalPageState

const onTabSelect = (newTab: string) => {
 setSelectedTab(newTab)
} 

这给了我无法设置未定义属性的错误。但是，这有效：

const { selectedTab } = GlobalPageState

const onTabSelect = (newTab: string) => {
 GlobalPageState.setSelectedTab(newTab)
}

假设其他一切都保持不变，为什么会这样？在这种情况下解构函数调用是否会以某种方式改变其功能，即引用？未显示的是正在使用的 GlobalPageState 上的许多其他函数和属性，并且在以这种方式解构时它们都可以正常工作，所以我不确定为什么这个调用会有所不同。谢谢！

Answer 1

基本上你只需要阅读 this 在 Javascript https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

中的工作原理

tl;dr：当您将函数分配给变量然后在不带点的情况下调用时，您的函数正在丢失上下文，例如 class.method()

关于 MobX，您也可以使用 @action.bound 尽管我建议坚持使用箭头函数，因为它是更“原生”的 JS 做事方式。此外，通常最好将所有 public class 方法（操作）定义为箭头函数，这样你就不必担心是否解构它们，你可以以任何一种方式调用它们。