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

Question

我正在使用ReactJs和Redux。

有一个父组件，它有几个子组件。 子项只是具有内置验证的输入元素。

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

我希望家长知道哪些孩子无效。

为此，每个孩子都可以触发“onValidate”事件，父母听取此事件并收集他所在状态的验证数据。如果一次由一个孩子触发验证事件，这非常有效。

然而，一旦有几个孩子同时触发这个事件，我就遇到了问题。例如，我在子组件的componentDidMount中运行onValidation，以了解初始值的验证信息。

父处理事件并更新其状态：

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

问题在于：

1. 将同时为每个孩子调用'validate'
2. 我修改了this.state.validity
的现有值
3. 'setState'不会立即发生

因此，到最后状态将只有关于最后一个调用'onValidate'的子节点的数据，因为在创建'newValidityState'时this.state.validity没有从其他状态变化获得更新。 / p>

我怎样才能克服这一点？我知道我可以使用setState的promises，但我不知道如何在这种情况下应用它们。

非常感谢你的建议。

Answer 1

这可能不是一个理想的解决方案。但试一试。状态应该具有每个ParamInput的属性，而不是更新状态的有效性 例如：validation_propertyName，其值应为布尔值，表示有效性。

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