在React组件状态下实现Mobx ViewModel

Question

我想在React的一个功能组件中使用Mobx ViewModel (来自mobx-utils)。在这种情况下，我的模型是一个状态。(例如，下一行中的公司)：

const [company, setCompany] = useState(store.companyObservable)

根据这一点，视图模型的初始将如下所示：

const vm = createViewModel(company);

在模板中使用它将如下所示：

 <Input        
   value={vm.name}
   onChange={e => vm.name = e.target.value }
 />

但在这种情况下，即使初始值会进入输入。输入现在不可编辑。这是可以理解的，因为他不在状态。

那么，我怎样才能以正确的方式实现这个东西呢？

Answer 1

通过像这样使用'computed‘来解决：

//store
@observable
companyDetails: ICompanyDetails = { id: 0 }

@computed
get companyDetailsViewModel() {
    return createViewModel(this.companyDetails)
}

//component
 const vm = companyStore.companyDetailsViewModel

<Input
   value={vm.name}
   onChange={e => vm.name = e.target.value}
/>

Answer 2

输入是不可编辑的，因为如果你在render中调用这个const vm = createViewModel(company)，那么每次都会从你的company中创建新的viewModel，并且你所有的字段基本上都会被重置。

你可以做的就是将你的ViewModel存储在内部状态，这样它的引用就会在重新渲染时被保留下来。

const [company, setCompany] = useState(store.companyObservable)
const [vm] = useState(createViewModel(company)) // Since you don't need to change it then you don't even need to destructure setter