Question

我想要什么？

我希望将mobx反应组件绑定到来自状态的盒装可观察原始值。因此，我希望组件在值更改时能够重新呈现。

使用lodash，

type BusinessData = { root: { path: { value: string } };

@observable state = buildInitialState();

const buildInitialState = () : BusinessData => {root: {}};

<BindedComponent value = {_.get(state, 'root.path.value')} />

const fetchState = () : BusinessData => { root: { path: { value: 'potato' } } };

出什么问题了？

首次呈现应用程序时，root.path为undefined。稍后将在某些内部组件生命周期的某个阶段或根据用户操作来获取它。此外，它甚至可能无法从服务器获取。直到用户编辑一些输入并且将设置此值，该路径才可能不存在于数据中。

可行的解决方案-显式初始化整个状态：

const buildInitialState = () : BusinessData => { root: { path: { value:  undefined } } };

然后BindedComponent可以装在装箱的undefined上并观察变化。这很不好，因为当状态深层嵌套时，我必须编写这样的样板。在我的情况下，业务数据的形状也可能有很多实现。因此，我必须在所有项目中显式地初始化其中的每一个。

关于没有样板怎么解决这个问题的任何想法？

Answer 1

尝试保持状态结构简单：

@observable state = { root: { path: { value: null } }

然后您可以创建一个简单的更新功能：

async setStateValue(value) {
      try {
       this.state.root.path.value = await value
      } catch (e) {
       console.log(e)
   }
}

在渲染阶段调用此命令，将在诺言完成后自动更新您的组件：

async updateFromComponent() {
      await setStateValue('potato')
 }

const {value} = prop.store.state.root.path
render (){
    return (
    <BindedComponent value = {value} />
)
}

在可观察的盒装原始值上绑定组件

1 个答案: