使用mobx-react使用对象/道具设置表单值

Question

我使用mobx-，我需要用从我的存储中的对象中提取的默认值填充一个表单。不幸的是，如果我尝试使用FormModel.$("email").set(object.email)；在我的组件中，mobx抱怨说我无法在操作之外修改观察到的对象，而且我超过了最大深度。

具体来说，我的代码如下所示(为了清晰起见，删除了一些细节)

import React from 'react';
import ReactDOM from "react-dom"
import { observer } from "mobx-react-lite"
import validatorjs from 'validatorjs';
import MobxReactForm from 'mobx-react-form';

    const fields = [{
      name: 'email',
      label: 'Email',
      placeholder: 'Email',
      rules: 'required|email|string|between:5,25',
      // value: user.email,
    }, … 
    ]

const FormModel = new MobxReactForm({ fields }, { plugins, hooks }); //nothing exception here standard plugins/hooks

const UserForm = observer(({open, onClose, object}) => {  //My component…object has fields with names email…

  FormModel.$("email").set(object.email); //This works fine if I replace object.email with "foo" 

  return (<MobxInput field={FormModel.$("email")} fullWidth />);
});

export default UserForm;

是的，我已经检查了对象有适当的字段(它只是一个从父…传入的裸对象在这种情况下，甚至连一个可观察的对象都无法观察到)。

我的第一种方法是简单地将所有内容放在UserForm中，并在来自对象的字段中填充值，但是当我这样做时，输入不能在结果形式中工作(我怀疑mobx试图观察在该观察者中创建的对象，这是不起作用的)。

问题是，我需要使用相同的表单，有时使用用户对象从我的用户存储中提供的数据，有时使用空白值来创建一个新用户，而我现在有点纠结于如何做到这一点。

Answer 1

首先，你不能这么做：

const UserForm = observer(({open, onClose, object}) => {
  // This won't really work very well
  FormModel.$("email").set(object.email);

  return (<MobxInput field={FormModel.$("email")} fullWidth />);
});

因为每次您在输入中更改值时，您的整个UserForm组件也会更改(因为它观察到刚刚更改的FormModel.$("email")值)，并且当它更改时，您会立即将新值从object更改为旧值。我不知道您为什么会得到最大深度错误，但是这里可能会有无穷无尽的循环，在某些情况下您可以看到。修改任何类似的内部渲染通常是一个不好的做法。您至少需要使用useEffect或类似的东西。

我不能在操作之外修改观察到的对象

发生这种情况是因为默认情况下需要在操作中执行所有的突变。但是，如果您不喜欢它，则可以配置它：

import { configure } from "mobx"

configure({
    enforceActions: "never",
})

但最好还是坚持下去，它可能会发现一些不想要的行为。

我用一些代码制作了快速Codesandbox示例，它展示了如何创建几个表单并将默认值传递给它们：

const UserForm = observer(({ object }) => {
  const [FormModel] = useState(() => {
    const fields = [
      {
        name: 'email',
        label: 'Email',
        placeholder: 'Email',
        rules: 'required|email|string|between:5,25',
        value: object?.email || ''
      }
    ];

    return new MobxReactForm({ fields }, { plugins });
  });

  return (
    <form onSubmit={FormModel.onSubmit}>
      <input {...FormModel.$('email').bind()} />
      <p style={{ color: 'red' }}>{FormModel.$('email').error}</p>

      <button type="submit">submit</button>
    </form>
  );
});

这只是很多方法中的一种，这完全取决于你最终需要什么。