卡壳的地方(不能直接写的都算)
- 思路不清;
- 还需要想一想;
- 还需要搜搜;
- 还需要找参考的地方
- …
eventStore自动调用接口刷新研究
声明eventBanners的时候,传入了events参数。
然后再eventBanner的willMount函数钩子的时候,遍历了这个参数(参数类型是key/value的键值对)
,具体处理是回调函数传参结构预处理&事件类型给 eventStore.init方法。
注意:_.each的 回调函数的参数位置,value/key,而不是key/value
_.forEach({ 'a': 1, 'b': 2 }, function(value, key) {
console.log(key);
});
eventStore的aId和attachEvent是干啥的?
aId
- 注释解释是 specifiedEvent的情况下aId其实是eventId
- 那什么是 specifiedEvent?
- 就是 associatedId
- associatedId 关联id 提供关联id时 只从evIds[type]中找到对应id===associatedId的事件
attachEvent
- 在获取完eventList后一定会触发的function
代码含义不太懂.
if (_.isArray(callback)) {
if (callback.length === 2) {
[onSuccess, onError] = callback;
} else {
onSuccess = callback[0];
onError = () => { };
}
} else {
onSuccess = callback;
onError = () => { };
}
callback 的数据类型可以为哪几种??
Error: Minified React error #185; visit https://reactjs.org/docs/error-decoder.html?invariant=185 for the full message or use the non-minified dev environment for full errors and additional helpful warnings
antd的table组件
onChange={this.setState({data: toJS(this.xxStore.method1)})}
//更正为:
onChange={this.xxStore.method1}
无嵌套关系的组件通信
找之前写过的.(28行代码[优化版])
不能用箭头函数,会导致 this指向错误[报错this.eventObj错误]。待深入理解箭头函数中的this指向
args = [].concat(Array.prototype.slice.call(arguments, 1)); //这句是重点
Array.prototype.slice.call(arguments)
类似的还有这样的写法,MDN解释slice方法可以用来将一个类数组(Array-like)对象/集合转换成一个新数组。你只需将该方法绑定到这个对象上。
所以可以使用slice将函数的参数变成一个数组,然后就可以当做数组来操作了。
concat() 方法用于连接两个或多个数组。
该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。
!== 和 != 有啥区别?
待梳理
何时,那种场景会粗发 componentWillUnmount
被三元表达式屏蔽的会,待思考其他场景
rangepicker组件设置可用时间段
看antd官网提示,
自定义日期范围选择
当 RangePicker 无法满足业务需求时,可以使用两个 DatePicker 实现类似的功能。
通过设置 disabledDate 方法,来约束开始和结束日期。
通过 open onOpenChange 来优化交互。
整理性的工作,对于自己来说先做还是后做?比如禅道任务更新和优先级不高的bug修改
之前是后者,现在是前者
回显匹配的时候,对于对象更新,老是第二次才能渲染正确。
先置空,然后再更新
=> 不是根本原因;
根本原因是:costRange子组件,radioGroup和inputNumber用的还是defaultValue,而不是value。
用词不精准,细心。
讨论 vs 确认
下载数据 vs 下载模板 || 列表结果下载
uploadModal在哪儿声明的?咋不跟editModal和EventBanner一样?
在入口页面引入的,所以其他子页面都可以用。只要传入对应参数即可
在哪儿调用的eventStore的init方法的。
在eventBanner的componentWillMount方法中
需求不明确
1.界面元素和界面交互逻辑以及验证的细则
2.面对面沟通过后的关于审批界面的,做了一版,也不知道对不对,因为跟原型不一样,
3.再者沟通的时候说原型还可能会变。不清楚该参考的最终版在哪儿何时能得到
受控组件
待整理
request 未定义
request是 lib 目录下
import { request } from "@lib/decorators";
url 是 config目录下
import { urls } from "@config/index";
图片在哪儿?
在router目录下的assets
对组件的认识和理解
- 重写(0->1写一个)
- 复用(规则相同)
- 复用(规则不同-> copy,然后修改规则 ; 或者 原先组件增加规则判断))
开发的不爽的
- 不知道功能是否有遗漏(范围和细节不明确)
- 没有一个开发后的对照规范清单(比如样式类的,校验类的等,金额靠右,带千分符,文字超长省略号,数值width定值等)
js异常,见如下代码
* 1581436800000 < 1581436800000 < 158376960000
尽然在浏览器console输出为true
1581436800000 < 1581436800000 //false
所以最好改为这种:
(1581436800000 < 1581436800000) && (1581436800000 < 1583769600000)
Uncaught Error: The value/defaultValue of RangePicker must be a moment object array after
antd@2.0
必须是一个对象数组,
语法的问题,我草
initialValue: [moment('2015-01-01', 'YYYY-MM-DD'), moment('2015-01-11', 'YYYY-MM-DD')]
moment('2015-01-01', 'YYYY-MM-DD') 替换掉 moment(dates[0]).format("YYYY-MM-DD"),否则在 antd的form中传入的moment对象,在rangePicker.js报错,不认为是moment对象
如何让交叉的数据清空??
待思考:
- 如果只有1个框,反复切换时,不应该报错
- 更好:不banner提示,而是直接框下提示
清空的值:
[]
""
[undefined, undefined]
[moment(undefined, "YYYY-MM-DD"), moment(undefined, "YYYY-MM-DD")]
dateChange = () => {
console.log("子类的方法");
const { dataSource } = this.props;
this.props.form.setFieldsValue({
// "rangePicker": [moment("2015-01-01", "YYYY-MM-DD"), moment("2015-01-02", "YYYY-MM-DD")]
"rangePicker": [moment(undefined, "YYYY-MM-DD"), moment(undefined, "YYYY-MM-DD")]
});
setTimeout(() => {
this.props.form.setFieldsValue({
// "rangePicker": [moment("2015-01-01", "YYYY-MM-DD"), moment("2015-01-02", "YYYY-MM-DD")]
"rangePicker": []
});
}, 2000);
}
怎么看禅道上,指派到我的,以及我完成的任务。。
筛选条件改为: 由我参与
antd的datepicker组件,时间限制如何做?
官网demo给的2个方法 disabledStartDate 和 disabledEndDate
2个方法实现的功能是:
* 开始时间不做限制,结束时间只能从开始时间当天开始算。
* 并且2个方法都做了容错处理,如果时间没有都录入的话,不做不可用限制。
注意的地方
* disabledStartDate是一个方法,配合 datePicker组件的 disabledDate属性
* 参数是 moment类型的。
* 比对的时候,用了moment的valueOf获取到毫秒数,进行比对
disabledStartDate = startValue => {
const { endValue } = this.state;
if (!startValue || !endValue) {
return false;
}
return startValue.valueOf() > endValue.valueOf();
};
disabledEndDate = endValue => {
const { startValue } = this.state;
if (!endValue || !startValue) {
return false;
}
return endValue.valueOf() <= startValue.valueOf();
};
=> 当下的需求逻辑是:
- 开始时间要从给定的一个时间开始算,之前的不可选。
- 结束时间要从给定的一个时间开始算,之后的不可选。
具体思考和做法
- 容错处理如何做? -> 判断给定时间是否有值。有值在判断
- 组件传值 -> 这个不难。直接props上传递即可
- 开始时间和结束时间的判断如何写?
-> 开始时间(之前的不可选[给定的<录入的])
-> 结束时间(之后的不可选[给定的>录入的])
卡壳的地方
- 传值处理 selectItem 是id,而不是对象,里面没有开始时间,结束时间
- 格式处理。日期不可用的数据设置,必须是moment类型的。
- 判断写反了()
-》更正
- 开始时间和结束时间的判断如何写?
-> 1.开始时间(之前的不可选[给定的<录入的]=>更正为给定的>=录入的) [去掉=,代表给定日期也可选]
-> 2.结束时间(之后的不可选[给定的>录入的]=>更正为给定的<=录入的) [去掉=,代表给定日期也可选]
-> 3.&少的判断(条件1,和条件2,需要同时加在开始时间和结束时间,不然开始时间没有限制截止时间,结束时间没有限制好开始时间。)
-》更正
- 结束日期判断,根据截止时间和开始时间去判断。跟开始时间判断不同了,更为合理些。
- 更符合1个时间段
- 而且限制了结束时间不可选开始时间之前的。
-》暂未解决的。
- 卡不住开始日期那天
- 放不开截止日期那天
antd的formItem的initialValue忘了位置在哪儿配置L
//错误位置
{getFieldDecorator("rangePicker", {
rules: [{ type: "array", required: true, message: "Please select time!" },
initialValue: [moment(selectRecord.startTime, 'YYYY-MM-DD'), moment(selectRecord.endTime, 'YYYY-MM-DD')]
],
//更正(上面错误代码原因, initialValue的配置中断rules这个数组了。)
{getFieldDecorator("rangePicker", {
rules: [{ type: "array", required: true, message: "Please select time!" }],
initialValue: [moment(selectRecord.startTime, 'YYYY-MM-DD'), moment(selectRecord.endTime, 'YYYY-MM-DD')]
})(<DayRangePicker onChange={this.props.dateChange.bind(this)}
onClick={this.props.addRow.bind(this)}
disabled={this.xxStore.params[`groupIdSave${dataSource.name}`]}
disableRanges={[moment(selectRecord.startTime, 'YYYY-MM-DD'), moment(selectRecord.endTime, 'YYYY-MM-DD')]}
ranges={[dataSource.startTime, dataSource.endTime]}
/>
老是报错 [“rangePicker is not an array”]
卡在这儿好久。是一个当天没解决了的问题
什么是纯函数组件?
待整理
bug如何尽可能避免,及改善
bug情况回顾 - 200219 初次
回顾mvp2 bug - 7+25(xx协助) [原型不定&需求不清(缺或者错)&自测不足&能力缺陷(表单验证)]
- 7个(表单规则校验&展示优化(多列少列多功能少功能)&超长内容展示)
- 25个(需求漏掉&原型不一致界面问题&接口入参不对引起的数据错误&操作组合引起的置空问题&界面美观[按钮组布局&滚动条]&表单数据校验)
回顾mvp1 bug - 24 [框架不熟&自测不足]
- 24个(界面美观[文件名超长&表头统一&无数据提示信息&&placehoder提示]&操作组合引起的置空问题(录入框&总数&上传文件)&异步提示问题[不显示]&字典信息获取error)
只能期待批次3,尽可能解决
- 目标: 创建流程bug < 30
》改进做法
- 原型多次确认(可以找测试同学请教下方法)
- 需求多理解(可以找组长,或者产品深度理解下需求)
- 表单校验(需要花时间统一下校验方式,看哪种方式更优,使用范围更广) -> 是个坎儿
差一点点,卡在异步验证上。(就一个type:array去掉的问题,本质是数据类型不匹配,被卡住一天)
- 理解也很重要。起码花时间弄懂了
- rangePicker对应数据类型-数组(moment)
- dayPicker对应数据类型-对象(moment)
rules: [{ type: "array", required: true, message: "Please select time!" }],
对于以上来说,
- rangePicker可用,因为默认是一个范围作为值录入的。所以是个数组,
- 但是对于2个拼接的dayPicker,即使给getFieldDecorate的 initialValue设置为数组
- 但是切换后,数组会被变更为 对象,此时就不满足校验规则的 type: "array"了
=> 解决方案
- 如果用rangePicker,则加上type:array规则
- 如果用2个dayPicker拼接的。则去掉 type:array规则。
- 注意的地方(切记)
- 凡是日期赋值,一定要确认是否先转成moment对象类型了。默认的string类型肯定赋值失败
moment对象,如何加1天?。
eg.
moment().add(1, 'days').calendar(); // 明天11:26
moment().add(3, 'days').calendar(); // 下星期六11:26
moment().add(10, 'days').calendar(); // 2020/02/29
.add(1, ‘days’)
解决截止日期当天不能选的问题
- 只在dayrangePicker组件的disableRanges属性上对endTime做增1天处理
- initalValue赋值部分不做增1天处理。