今天在做ant表单回显的时候出现
You cannot set a form field before rendering a field associated with the value
是因为先赋值了,但是表单还没有渲染,所有延迟就好了
setTimeout(()=>{
this.props.form.setFieldsValue({
'userName':name})},0)
这种是我在使用ant表单实现这个效果时候回显遇到的问题
ant4.0的这种格式表单是封装好了的,但是自己的没有升级是ant3.0所以要自己来封装了
getFieldDecorator('keys', {
initialValue: [] });const keys = getFieldValue('keys');
const formItems = keys.map((k, index) => (<div key={
k} style={
{
backgroundColor: "#fff", paddingLeft: "10px" }}><Row gutter={
16}><Col span={
7}><Form.Itemlabel={
index === 0 ? '参数名称' : ''}required={
false}>{
getFieldDecorator(`names[${
k}].name`, {
validateTrigger: ['onChange', 'onBlur'],rules: [{
required: true,whitespace: true,message: "请输入参数名称",},],})(<Input placeholder="请输入" style={
{
width: '100%' }} />)}</Form.Item></Col><Col span={
3} style={
{
display: "flex" }}><Form.Itemlabel={
index === 0 ? '状态' : ''}required={
false}>{
getFieldDecorator(`names[${
k}].status`, {
valuePropName: 'checked',validateTrigger: ['onChange', 'onBlur']})(<Switch checkedChildren="显示" unCheckedChildren="隐藏" />)}</Form.Item><div style={
index === 0 ? {
paddingTop: "15px", margin: "auto" } : {
paddingBottom: "20px", margin: "auto" }}><IconclassName="dynamic-delete-button"type="minus-circle-o"onClick={
() => this.remove(k)}/></div></Col></Row></div>));
1、 回显的时候是直接赋值给这个数组names,但是要注意同时赋值一下keys,代表的是列表个数的回显,如果没有赋值则会报上面的那个错误!!!!
2、还有就是回显的时候对应的names数组里面的属性只给表单参数里面需要的,多余的不要加进去,不然也会报上面的错误。
回显关键代码
this.props.form.setFieldsValue({
keys: res.IotDevParams ? res.IotDevParams.map((item, index) => {
return index }) : [] // 表单的长度});setTimeout(()=>{
this.props.form.setFieldsValue({
names: res.IotDevParams ? res.IotDevParams.map(item => {
return {
name: item.Name, desc: item.Desc, unit: item.Unit, status: item.Status==1 } }) : []}) },0)