当多个子代同时发送事件时，更新组件父代的反应状态

Question

I'm using ReactJs with Redux.

There is a parent component, which has several children. Children are just input elements with build-in validation.

<ParamInput
  type="number"
  value={item.capacity}
  name="capacity"
  min="1"
  validators={[Validator.required]}
  onValidation={this.validate}
/>

I'd like the parent to be aware which of its children are invalid.

For this each child can fire "onValidate" event, parent listens to this event and collects the validation data in his state. This works pretty good if the validate event fired by one child at a time.

However, once several children trigger this event at the same time, I run into a problem. For example, I run onValidation in componentDidMount of a child, to know validation information for an initial value.

Parent processes the event and updates its state:

  validate(isValid, propertyName) {
    const newValidityState = { ...this.state.validity, ...{[propertyName]: isValid} };
    this.setState({validity : newValidityState });
    }

The problem is in combination of following:

1. 'validate' will be called for each child at the same time
2. I amend the existing value of this.state.validity
3. 'setState' does not happen immediately

Thus, by the end the state will have data only about the last child which called 'onValidate', because at the time 'newValidityState' was created this.state.validity didn't get updates from other changes of state.

How can I overcome this? I'm aware that I can use promises for setState, but I don't see how I can apply them for this case.

Would be grateful for your suggestions.

Answer 1

This may not be an ideal solution. But give it a try. Instead of updating validity propery of state, state should have properties for each ParamInput for eg: validation_propertyName and its value should be boolean indicating validity.

validate(isValid, propertyName) {
     this.setState({["validation_"+propertyName]: isValid });
}