当前位置: 代码迷 >> 综合 >> Ant表单出现“You cannot set a form field before rendering a field associated with the value”
  详细解决方案

Ant表单出现“You cannot set a form field before rendering a field associated with the value”

热度:18   发布时间:2023-10-31 08:39:57.0

今天在做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)
  相关解决方案