When I try to update the value of a form from an object passed in props I get a bunch of warnings saying:
"Since strict-mode is enabled, changing (observed) observable values without using an action is not allowed. Tried to modify: Field@18.$value "
and then an error saying "Maximum update depth exceeded."
Specifically my code looks like this (some details removed for clarity)
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;
Yes, I've checked the object has the appropriate fields (it's just a bare object passed in from parent …not even an observable object in this case).
I fear maybe I misunderstand how this is supposed to work but I also tried to simply build FormModel inside my component, i.e., move it and fields down inside the function, and specify values inside field there but then I can't type into any of the resulting forms (I presume because mobx gets confused when the observed object is created inside the observer).
When I try to update the value of a form from an object passed in props I get a bunch of warnings saying: "Since strict-mode is enabled, changing (observed) observable values without using an action is not allowed. Tried to modify: Field@18.$value "
and then an error saying "Maximum update depth exceeded."
Specifically my code looks like this (some details removed for clarity)
Yes, I've checked the object has the appropriate fields (it's just a bare object passed in from parent …not even an observable object in this case).
I fear maybe I misunderstand how this is supposed to work but I also tried to simply build FormModel inside my component, i.e., move it and fields down inside the function, and specify values inside field there but then I can't type into any of the resulting forms (I presume because mobx gets confused when the observed object is created inside the observer).
Is this an error or am I just confused?