Not able to control the`formData` in redux state

Description

We get a formData object from the server that we allow the user to edit and we are using lodash ._set-object to update parts of that formData depending on what part of the formData the user updates.

Steps to Reproduce

We are trying to control the state of formData in redux state. We try to use componentWillReceiveProps, but can’t get the updated state back as a props. We put our action in onChange function and it changes the state correctly when we type in text. But when we finish typing it return back to empty string value as it can’t get updated state to the component as a props, and then the onChange function triggers the action once again because value of the input is empty.

We are trying to get the current value locally by setting the state inside the component but getting this error;

Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops

This is our function;

onChange = ({ formData }) => {
const { path, editKeyword } = this.props;
const inputValue =formDataData[editKeyword];

let prevformData = this.props.formData;

// update the object using
const updatedFormData = _.set(prevFormData, path, inputValue);

// action
this.props.setCurrentFormData(updatedformData);};

We also tried the following with no luck;

onChange = ({ formData }) => {
const { path, editKeyword } = this.props;
const inputValue = formData[editKeyword];
console.log("input value ", inputValue);

let prevFormData = this.props.formData;

const updatedFormData = _.set(prevformData, path, inputValue);

// when we try to update local state
this.setState({ FormData: updatedformData})

};

Anyone encountered anything similar? We can’t directly use the formData from the form-input because we are merging values from server and the user input.

[LucianBuzzo]

The issue is here https://github.com/mozilla-services/react-jsonschema-form/blob/master/src/utils.js#L190 - When a Form is updated, it checks computed formData against the formData prop, if there is a difference, then the onChange handler is called. If the formData value is falsey, then the this will result in an infinite loop, as the computed formData and props.formData will never be the same.

Update: I’ve opened a PR to fix this issue

[mikaelmh]

@LucianBuzzo thank you, this was great! We were able to make it work this past weekend. Awesome feedback.