antd Form 组件使用 Select 组件设置 defaultValue 报错 defaultValue is invalid for getFieldDecorator ...

前言

日常积累，欢迎指正

问题描述

错误代码段

import * as React from 'react'
import { Card, Form, Select } from 'antd'
const Option = Select.Option
import { FormComponentProps } from 'antd/lib/form'

interface IState {

	// defaultCurrentLayerKey : any
}
interface IProps {
	/**
	 * 面板关闭触发
	 */
	onClose?: (currentCom) => void
}
interface IDisasterEvaluationFormProps extends FormComponentProps {

}
class ComForm extends React.Component<IDisasterEvaluationFormProps, IState> {
	constructor(props: IDisasterEvaluationFormProps) {
		super(props)
	}
	render() {
		const { getFieldDecorator } = this.props.form
		const formLayout = {
			labelCol: { span: 6 }, //  offset : 12
			wrapperCol: { span: 14, offset: 3 },
		}
		return (
			<React.Fragment>
				<Form  {...formLayout}>
					<Form.Item  label='当前图层: '>
						{getFieldDecorator('currentLayer', {
							rules: [{
								required: true, message: '请选择图层!',
							}],
						})(
							<Select   placeholder = '选择图层'  defaultValue='最大淹没水深'  onChange={this.onCurrentLayerChange}>
								<Option value='maxDepth'>最大淹没水深</Option>
								<Option value='maxFloodVelocity'>最大洪水流速</Option>
								<Option value='floodTime'>洪水淹没历时</Option>
								<Option value='floodLevel'>洪水淹没水位</Option>
							</Select>,
						)}
					</Form.Item>
				</Form>
			</React.Fragment>
		)
	}
	onCurrentLayerChange = (e) => {
		console.log(e)
	}
}

const ComFormApp = Form.create<IDisasterEvaluationFormProps>({})(ComForm)

报错信息defaultValue is invalid for getFieldDecorator will set value, please use option.initialValue instead.

修改后正确代码段

import * as React from 'react'
import { Card, Form, Select } from 'antd'
const Option = Select.Option
import { FormComponentProps } from 'antd/lib/form'

interface IState {

	// defaultCurrentLayerKey : any
}
interface IProps {
	/**
	 * 面板关闭触发
	 */
	onClose?: (currentCom) => void
}
interface IDisasterEvaluationFormProps extends FormComponentProps {

}
class ComForm extends React.Component<IDisasterEvaluationFormProps, IState> {
	constructor(props: IDisasterEvaluationFormProps) {
		super(props)
	}
	render() {

		const { getFieldDecorator } = this.props.form

		const formLayout = {
			labelCol: { span: 6 }, //  offset : 12
			wrapperCol: { span: 14, offset: 3 },
		}
		return (
			<React.Fragment>
				<Form  {...formLayout}>
					<Form.Item  label='当前图层: '>
						{getFieldDecorator('currentLayer', {
							rules: [{
								required: true, message: '请选择图层!',
							}],
						    initialValue : '最大淹没水深',
						})(
							<Select placeholder = '选择图层'  onChange={this.onCurrentLayerChange}>
								<Option value='maxDepth'>最大淹没水深</Option>
								<Option value='maxFloodVelocity'>最大洪水流速</Option>
								<Option value='floodTime'>洪水淹没历时</Option>
								<Option value='floodLevel'>洪水淹没水位</Option>
							</Select>,
						)}
					</Form.Item>
				</Form>
			</React.Fragment>
		)
	}
	onCurrentLayerChange = (e) => {
		console.log(e)
	}
	
}

const ComFormApp = Form.create<IDisasterEvaluationFormProps>({})(ComForm)

总结

Form.Item 子组件的 defaultValue 参数都要被 getFieldDecorator 中的 initialValue 替换

参考内容

segmentfault - antd-Warning: defaultValue is invalid for getFieldDecorator？