背景:
Antd + react项目,在对form
表单进行初始化的时候,遇到以下问题:Warning: You cannot set a form field before rendering a field associated with the value.
搜索了好多相关问题的回答,原因是 有的属性没有在getFieldDecorator中注册就调用setFieldsValue
导致的。后来改用initialValue
之后就没有问题了。
代码:
fetchBrandDetail = async () => {
const res = await queryBrandDetail({accountId: 11})
if (res) {
this.setState({brandDetail: res.data}
// 控制台报warning
this.props.form.setFieldsValue({ ...res.data })
});
}
}
...
...
<Form.Item label="品牌名称:" required>
{
isEdit ? (getFieldDecorator('brandName', {
initialValue: brandName,
rules: [{required: true}]
})(
<LimitInput
type="input"
required
maxNum={10}
inputValue={`${brandName}`}
onInputChange={(val)=>this.onInputChange(val, 'brandName')}
/>)
) : (
<span className="input-content">{brandName || '暂无'}</span>
)
}
</Form.Item>
...
后来改为使用initialValue
来进行初始化,就没有再报错啦
<Form.Item label="品牌名称:" required>
{
isEdit ? (getFieldDecorator('brandName', {
initialValue: brandName, // 新增
rules: [{required: true}]
})(
<LimitInput
type="input"
required
maxNum={10}
inputValue={`${brandName}`}
onInputChange={(val)=>this.onInputChange(val, 'brandName')}
/>)
) : (
<span className="input-content">{brandName || '暂无'}</span>
)
}
</Form.Item>
附 Antd form链接