200219&菜鸡前端工作卡壳梳理汇总

卡壳的地方(不能直接写的都算)

• 思路不清；
• 还需要想一想；
• 还需要搜搜；
• 还需要找参考的地方
• …

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天处理。