我正在使用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 });
}
问题是以下组合:
将同时为每个孩子调用
-
'validate'
-
我修改了this.state.validity的现有值
-
'setState'不会立即发生
因此,到最后状态将只有关于最后一个调用'onValidate'的子节点的数据,因为在创建'newValidityState'时this.state.validity没有从其他状态变化获得更新 .
我怎么能克服这个?我知道我可以使用setState的promises,但我不知道如何在这种情况下应用它们 .
将不胜感激您的建议 .
1 回答
这可能不是一个理想的解决方案 . 但试一试 . 而不是更新状态的有效性,状态应该具有每个ParamInput的属性,例如:
validation_propertyName
,其值应该是布尔值,表示有效性 .