云掣YUNCHE
云掣YUNCHE

你居然是这样的initialValue

杭州又又又火了

“2019全国双创周”

让全世界看到中国科技创新的实力

中国5G

“中国芯”

中国“OS”

...

中国制造已经成为"中国智造"

我们正走在世界科技创新的前沿

每一个兢兢业业的攻城狮/技术人

都是这个时代的弄潮儿

本周回归“技本功”系列

回归，科技强国，科技引领创新的本心

 作者：三省 

云掣科技-服务团队

前端开发工程师

先说一下写着篇文章的契机，是因为回显，复杂表单的回显，让我觉得我对initialValue这个属性是有误解的。

initialValue的出处和定义

initialValue的出处：

AntDesign/Form表单件/getFieldDecorator(id，options)装饰器函数/第二个参数options/options.initialValue。

链接地址：https://ant.design/components/form-cn/#getFieldDecorator(id,-options)-%E5%8F%82%E6%95%B0

关于属性initialValue，官方的解释如下：

关键字是“子节点的初始值”，初始值也就是默认值，比如Form中有一个城市的选择器，默认选择“杭州”，那么initialValue就是杭州对应的value。

所以其实我一直以为initialValue是defaultValue一样的存在。

 我这样的混淆视听，偷换概念，恐怕是要失业哟~

initialValue和defaultValue的区别

1. defaultValue的例子

importReact, { Component,Fragment }from'react';import{ Button,Input }from"antd";exportdefaultclassCreateFromextendsComponent{state={value:"value"}updateValue =()=>{this.setState({value:"newValue"})  }  render() {return(更新value    );  }}

说明：当该组件被渲染时，Input中的值为”value“，当我点击“更新value按钮”时，Input中的值不更新。

Input组件没有设置value属性的话，就是一个非受控组件，它需要设置defaultValue，如果用户不手动改变Input的输入，那么Input就一直显示defaultValue指向的值（友情提示：值为Input组件第一次被渲染时的真实值，变量或者常量指向的真实值）。这里涉及到了受控组件和非受控组件的知识，不做延伸。

2. intialValue的例子

models/list.js

letcount =1;constCITY = ["杭州","北京","上海","广州","深圳"];exportdefault{namespace:'list',  state: {    citys: CITY,detail:{city:CITY[count%5],count}  },  effects: {    *fetchDetail({ payload }, { call, put }) {// 不发请求,而是直接更新reducer// const response = yield call(service, payload);      count++; yieldput({type:'queryDetail',payload: {city:CITY[count%5],count},      });    },  },  reducers: {    queryDetail(state, action) {return{        ...state,        detail: action.payload,      };    }  },};

router组件文件

importReact, { Component }from'react';import{ connect }from"dva";import{ InputNumber,Select,Form,Button }from"antd";constFormItem = Form.Item;const{ Option } = Select;constformItemLayout = {labelCol: {xs: {span:24},sm: {span:2},  },wrapperCol: {xs: {span:24},sm: {span:22},  },};@connect(({list})=>({citys:list.citys,detail:list.detail}))classCreateFromextendsComponent{getDetail =()=>{this.props.dispatch({type:"list/fetchDetail"});  }  render() {const{ form,detail={},citys=[] } =this.props;const{ getFieldDecorator } = form;const{ city,count } = detail;return(重新获取数据            {citys.map(item=>{item})            }          )}          )}    );  }}export default Form.create()(CreateFrom);

说明：当该Form组件被渲染时，接收props.detail，因为在models/list.js文件的state中已经初始化，所以，第一次render被渲染的值是“杭州”和“1”，点击“重新获取数据按钮”，这个时候props.detail改变为{city:"北京",count:2}，与此同时Form被渲染的值也随之改变。

uhmmm，怎么和defaultValue的表现方式不一样？不是说好是默认值的嘛？不是说好不会跟着数据的改变而改变的嘛？逗我玩还是~

敲黑板，划重点，initialValue值可以被更新，除了下面两种情况：

1. 用户手动更新表单数据，比如在组件中手动输入，在