Warning: [antd: Form.Item] `defaultValue` will not work on controlled Field. You should use `initial

最新推荐文章于 2024-03-15 09:05:24 发布

Jim-zf

最新推荐文章于 2024-03-15 09:05:24 发布

阅读量4k

点赞数 2

文章标签： java 前端开发语言

本文链接：https://blog.csdn.net/weixin_46600931/article/details/127286170

版权

使用antd: Form.Item组件的defaultValue属性之后，页面虽然显示了数据但是报错;

警告：[antd:Form.Item]`defaultValue`对受控字段无效。您应该改用Form的“initialValues”。

问题代码

  function formInput() {
    if (!objData) return false;
    return Object.keys(objData).map((item, index) => {
      return (
        <Form.Item
          label={item}
          key={index}
          name={`${item == '用户' ? 'userName' : 'password'}`}
          rules={[{ required: true, message: `请输入${item}` }]}
          // initialValue={objData[item] ? objData[item] : ''}
        >
          <Input
            disabled={item == '用户'}
            type="text"
            autoComplete="off"
            defaultValue={objData[item] ? objData[item] : ''}
            onChange={(e) => onChangInputForm(e, item)}
            placeholder={`请输入${item}`}
            allowClear
          />
        </Form.Item>
      );
    });
  }
//defaultValue报错

解决代码

  //使用 initialValue 替代defaultValue 添加在Form.Item标签内
function formInput() {
    if (!objData) return false;
    return Object.keys(objData).map((item, index) => {
      return (
        <Form.Item
          label={item}
          key={index}
          name={`${item == '用户' ? 'userName' : 'password'}`}
          rules={[{ required: true, message: `请输入${item}` }]}
          initialValue={objData[item] ? objData[item] : ''}
        >
          <Input
            disabled={item == '用户'}
            type="text"
            autoComplete="off"
            // defaultValue={objData[item] ? objData[item] : ''}
            onChange={(e) => onChangInputForm(e, item)}
            placeholder={`请输入${item}`}
            allowClear
          />
        </Form.Item>
      );
    });
  }

只需要改这两处就可以。。其余代码什么意思可以忽略，我这个结构是做的表格动态新增列与新增行的部分代码。。