ant-design / ant-design-pro

👨🏻‍💻👩🏻‍💻 Use Ant Design like a Pro!
https://pro.ant.design
MIT License
36.34k stars 8.14k forks source link

🐛 [BUG]在renderFormItem中使用getFieldName 获得的值为undefied #10468

Closed SpringSan closed 11 months ago

SpringSan commented 1 year ago

🐛 bug 描述

📷 复现步骤 | Recurrence steps

renderFormItem: (item, { defaultRender, ...rest }, form) const status = form.getFieldValue('status');

🏞 期望结果 | Expected results

不等于undefined

💻 复现代码 | Recurrence code

{ title: ( <FormattedMessage id="pages.searchTable.titleUpdatedAt" defaultMessage="Last scheduled time" /> ), sorter: true, dataIndex: 'updatedAt', valueType: 'dateTime', renderFormItem: (item, { defaultRender, ...rest }, form) => { const status = form.getFieldValue('status'); console.log(status) if (${status} === '0') { return false; } if (${status} === '3') { return ( <Input {...rest} placeholder= {intl.formatMessage({ id: 'pages.searchTable.exception', defaultMessage: 'Please enter the reason for the exception!', })} /> ); } return defaultRender(item); }, },

© 版本信息

🚑 其他信息

1672409836179
chenshuai2144 commented 1 year ago

TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns. 此回复基于 ChatGPT 自动生成,可以尝试下方案,官方人员会在一定时间后继续继续处理。

你好,根据你提供的问题,是在 antd-pro 中使用 renderFormItem 方法时,getFieldValue 方法获取的值为 undefined。可以检查一下是否正确地传递了 form 属性给 renderFormItem,或者是否在 renderFormItem 中正确获取了 form 属性。 同时,也可以检查以下原因:

  1. 检查使用 getFieldProps 或其他相关的属性来获取到 getFieldProps 或 getFieldValue 的值
  2. 检查数据是否在状态管理器中传递,是否需要同步更新状态
  3. 检查 antd 版本是否有更新,如果有新版本,建议升级到最新版本

你可以参考以下代码示例来尝试解决这个问题:

// 其中 columns 部分省略
<Form form={form}>
  {columns.map((column) => (
    <Form.Item {...column.formItemProps} key={column.key}>
      {getFieldDecorator(column.key, column.options)(
        <span>
          {column.title}{' '}
          {column.renderFormItem
            ? column.renderFormItem(
                {
                  field: {
                    ...column.options,
                    name: column.key,
                    onChange: (value) => {
                      // 每一次的表单值变化时,同时更新状态
                      form.setFieldsValue({ [column.key]: value });
                      dispatch({ type: 'lister/changeValue', payload: { [column.key]: value } });
                    },
                    onValuesChange: (props, values) => {
                      // onValuesChange 也可以使用,json格式
                      console.log(column.key, values[column.key]);
                      dispatch({ type: 'lister/changeValue', payload: { [column.key]: values[column.key] } });
                    },
                  },
                  input: <Input />,
                  form,
                },
                {},
                form,
              )
            : null}
        </span>,
      )}
    </Form.Item>
  ))}
</Form>

在上述代码示例中,getFieldValue 实际是使用了 getFieldDecorator 方法来处理的,同时在 form 传递进来之后,通过 setState 或者 dispatch 等方式更新了状态,达到更新表单值的目的。

你也可以查找 antd 官网中响应文档,以便快速解决问题:https://ant.design/docs/react/getting-started-cn