【工作总结】2023.10第四周

上周提测,本周主要是对测试提出的bug进行修复,踩了一些坑,一些经验应当被总结

1.关于处理后端数据的问题

后端给前端返回的数据,往往不是可以直接使用的,例如要求根据后端返回的0和1分别展示为"日前高"和"实时高",这种情况最好不要动后端给返回的数据,而应设置render属性,生成映射,动态地去渲染,更改后端数据,一旦出现bug,必然是前端背锅,并且后端更改数据,前端的也要做大量更改

2.代码的封装时机

任何代码用到两遍以上,应考虑封装成一个公共函数,降低文件复杂度,应对sonar扫描。一个文件内的复杂度不要超过15，一个if或for等语句都算一个复杂度

3.使用antd的spin组件设置loading效果应成为常识,为用户考虑

3.1设置步骤:

• 发送请求前,设置spin的loading = true
• 使用async ...await请求时,在await后追加.catche()语句,设置spin的loading = false;若使用promise发送请求则在finally语句里设置spin的loading = false。防止接口报错时，一直loading。
• 将数据处理完毕后，回调函数最后设置spin的loading = false，结束loading状态

3.2代码示例如下:

  const queryChart1 = useCallback(async () => {
    setDayNodeLoading(true);
    // 查询节点电价
    const dateArr = [
      nodeForm.getFieldValue()?.date?.[0]?.format(FORMATTIME),
      nodeForm.getFieldValue()?.date?.[1]?.format(FORMATTIME),
    ];

    const res = await nodePowerPrice({
      startDate: dateArr[0],
      endDate: dateArr[1],
      tradeCenterId: 1,
      type: 2,
    }).catch(() => setDayNodeLoading(false));

    const data1 = {
        xData: [],
        seriesData: {
          dayAheadNodePrices: [],
          realTimeNodePrices: [],
        },
      },
      data3 = { xData: [], seriesData: [] };
    res?.data?.forEach((item) => {
      // 日均节点电价
      data1.xData.push(item.date);
      data1.seriesData.dayAheadNodePrices.push(formatNum(_.mean(item.dayAheadNodePrices), 4));
      data1.seriesData.realTimeNodePrices.push(formatNum(_.mean(item.realTimeNodePrices), 4));

      // 实时节点电价K线
      data3.xData.push(item.date);
      data3.seriesData.push([
        item.realTimeNodePrices[0],
        item.realTimeNodePrices[item.realTimeNodePrices.length - 1],
        _.min(item.realTimeNodePrices),
        _.max(item.realTimeNodePrices),
      ]);
    });

    setCheckNodeData({
      DayPriceTrendOption: data1,
      RealTimeKOption: data3,
    });
    setDayNodeLoading(false);
  }, [nodeForm]);

4.antd-pro

antdPro是对antd组件的进一步封装,例如ProFormDateRangePicker就是把Form组件和RangePicker组件封装在一起,封装后的Pro组件拥有自己的API,但也保留了基础组件的API要调用基础组件的API,可以通过Pro组件的fieldProps属性进行透传

 <ProFormDateRangePicker
              name={"timeRange"}
              label={"日期"}
              fieldProps={{//透传基础组件API
                getPopupContainer: (f) => f,
                changeOnBlur: true,
                allowClear: false,
                onChange: () => {
                  setTimeValue(formRef?.current?.getFieldValue()?.timeRange);
                },
              }}
            />