在React Component状态下实现Mobx ViewModel

编程问答 2022-06-05

问题描述

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

grammar37.txt

并且据此，视图模型的开头将如下所示：

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

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

const vm = createviewmodel(company);

但是以这种方式，即使初始值将进入输入。输入现在不可编辑。这是可以理解的，因为他还没有处于状态。

那么，我该如何以正确的方式实现这一目标？

解决方法

输入是不可编辑的，因为如果在渲染器内部调用此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
,

通过使用“计算”​​来解决：

//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}
/>
mobxmobxmobxmobxmobx-reactmobx-utilsreactjsreactjsreactjsreactjs