Блог

Проблема, с которой я сталкиваюсь, не требует, так сказать, исправления, поэтому мне любопытно, почему эта функциональность меняется. Этот код написан на 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)
} 
 

Это выдает ошибку, что я не могу установить свойства undefined . Однако это работает:

 const { selectedTab } = GlobalPageState

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

Почему это так, если предположить, что все остальное останется прежним? Изменяет ли деструктурирование вызова функции в этом случае каким-либо образом его функциональность, т.Е. Ссылки? Не показано множество других функций и свойств в GlobalPageState, которые используются, и все они отлично работают при деструктурировании таким образом, поэтому я не уверен, почему этот вызов будет другим. Спасибо!

По сути, вам просто нужно прочитать, как this это работает в Javascript https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

tl; dr: ваша функция теряет контекст, когда вы присваиваете ее переменной, а затем вызываете без точки, например class.method()

Что касается MobX, вы также можете использовать @action.bound , хотя я бы рекомендовал придерживаться функций со стрелками, потому что это более «родной» способ работы с JS. Также обычно лучше определять все методы (действия) открытого класса как функции со стрелками, таким образом, вам не нужно беспокоиться о том, разрушаете вы их или нет, вы можете вызывать их в любом случае.