1
**问题背景**
【时间紧迫的小伙伴可以跳读或不读该段】今天在整合代码的时候 发现自己去一个表单对象的日期需要动态修改,之前的方式是分别定义了两个新的state,在传值给后台的时候,不用表单的日期值,而是传递这两个新的state.但是这样对于代码一致性是非常不友好的,因此,我决定换一种实现方式。
好了,废话不多说,上代码:
//用的antd的布局
import {DatePicker} from "antd";
const { RangePicker } = DatePicker;
const dateFormat = "YYYY-MM-DD";

//state中声明的对象
state={
    basicInfo={
        beginDate:'',
        expiry:''
    }
}
//定义函数修改对象的值
//日期切换
  changeDate = (data,dataStr) => {
    let { basicInfo }= this.state;
    console.log("changeDate -> data, dataStr", dataStr);

    //打印结果 changeDate -> dataStr (2) ["2020-05-21", "2020-06-27"]

   let newData = Object.assign(
      basicInfo,
     { effective: dataStr[0], expiry: dataStr[1] },
    );
    this.setState({
      basicInfo: newData,
    });
    console.log("changeDate -> basicInfo", basicInfo.toString());
    //打印结果简写 {effective: "2020-05-21",expiry: "2020-06-26"};

//页面上触发函数
    <RangePicker
        defaultValue={[
          moment(effective, dateFormat),
          moment(expiry, dateFormat),
        ]}
        onChange={this.changeDate}
    />

Object.assign知识点说明

【官方解释】 Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

我理解的就是两个对象进行拼接重组。如果当前要更新的对象中含有这个属性就更新它,否则就直接添加它。比如原basicInfo对象中没有newTest的属性,我在源对象中加入一个测试字段,basicInfo就会存储上这个属性,打印信息如下:{effective: "2020-05-21",expiry: "2020-06-26",newTest: "123"}

//官方实例
const target = { a: 1, b: 2 };
//目标对象,也就是当前实例中的basicInfo
const source = { b: 4, c: 5 };
//源对象,也就是当前实例中具体想要修改的哪一项 effective和expiry

const returnedTarget = Object.assign(target, source);//通过Object.assign实现两个对象的合并,并返回合并后的对象值

console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }


y_lucky
20 声望3 粉丝

做一只快乐的程序猿!!!