jafar: Value or State change is not sync, so update data in react component is wrong in some scenes

In react-form of jafar, update value or state through onValueChange or onStateChange function, then react pass props to component, reflect this change.

But this progress is not sync, so in some scenes the update logic is wrong. for example, Validators.js in react-editor :

export default withTheme(({ value = [], state = {}, onValueChange, onStateChange }) => {
    ....
    const onValidatorStateChange = (validatorState, index) => {
        ....
        onStateChange(newState);
     };
}

If there are two validators, when the second child call onStateChange function, the state prop has not updated in this time. So the ‘state’ in Validators will miss the update of first child.

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 15 (7 by maintainers)

Most upvoted comments

Looks very well. Standard code and fast response, you are a talented engineer.

WangLarry on Jul 6, 2020

@WangLarry 10x for the idea! I added the support on issue - https://github.com/yahoo/jafar/issues/56 pr- https://github.com/yahoo/jafar/pull/57

I updated the Validators.jsx bug fix to use the new updater function - https://github.com/yahoo/jafar/pull/57/files#diff-ed891647db1d963f7c32b391ac0b1fb3

available now on v1.0.6

Updater function support docs available on - https://yahoo.github.io/jafar/docs/actions.html#changestate https://yahoo.github.io/jafar/docs/actions.html#changevalue

galhavivi on Jul 5, 2020

I understand and remember it in document, Jafar is very powerful:)

My opinion is ‘Stateful Components’ + restore status + tacking/logs

In current Jafar, Stateful Components will lose 1) and 2) feature.

WangLarry on Jul 6, 2020

You are right.
changeState - most of the cases will be fine and work ok. Keeping all the logic in Jafar engine is very important.

expect it 😃

WangLarry on Jul 5, 2020

@WangLarry fixed and deployed 😃

galhavivi on Jul 4, 2020

in react-editor page, then FormList > FormEditor > FieldEditor, edit the ‘benefits’ field of employee, add another VALIDATORS, then save. You will find previous validator dispear.

WangLarry on Jul 4, 2020