MobX useObserver 无法处理已破坏的参数

Question

例如，当我尝试破坏商店的参数时，我有商店和应用程序 useObserver 不工作当商店的标题更改时，反应不是 re-render 应用程序。但是，如果我不破坏参数，而是像 Store.title 那样直接在 return 中使用，它将起作用。为什么它会这样工作以及如何解决它？

--Store.js--

import { observable, action } from 'mobx'
class Store{
  @observable title = "";

  @action handleTitleChange({ target: {value} }){
     this.title = value;
  }
}

-- App.js-- 不工作

import React from 'react'
import { useObserver } from 'mobx-react'
import Store from 'store'

export default () => {
  const { title, handleTitleChange } = Store
  return useObserver(() =>{
    <input value={title} onChange={handleTitleChange}>
  })
}

-- App2.js-- 工作

import React from 'react'
import { useObserver } from 'mobx-react'
import Store from 'store'

export default () => {
  const { handleTitleChange } = Store
  return useObserver(() =>{
    <input value={Store.title} onChange={handleTitleChange}>
  })
}

Answer 1

文档的“了解反应性”部分解释了这种情况 https://mobx.js.org/understanding-reactivity.html

您正在取消引用 observer 装饰器之外的值（useObserver 如果您的情况）。您要么需要像在第二个示例中那样做，要么用 observer 包裹整个组件，就像这样：

import React from 'react'
import { observer } from 'mobx-react'
import Store from 'store'

export default observer(() => {
  const { title, handleTitleChange } = Store
  return <input value={title} onChange={handleTitleChange} />
})

MobX useObserver 无法处理已破坏的参数

MobX useObserver not working on destructed params

javascript

reactjs

mobx

mobx-react

react-hooks