开发中遇到的问题，及解决方案

[NemoZhong]

• 字符串，按给定的字符数组，分割成树 ，子id同父节点id一致（设备采集点树）
• exp:

  id:'id'
  string:'abcdefg*123.vvv'
  splitAry:[',','*'] 
  result:[{id::'id',name:abcdefg,children:[{id::'id',name:'123',children:[{id::'id',name:'vvv'}]}]}]

[NemoZhong]

// 因为分隔符可以是任意的，字符串每段不能包含特殊字符，因此取巧地将所有特殊字符先替换为'%',split 之后再构造树结构
// 'abcdefg\*123.vvv'->'abcdefg%123%vvv'->['abcdefg','123','vvv']->tree

let treeList =[ ...data ];
// 点位名称不能是% 所有用%占位分割
const specialChar = '%';

const list = treeList
  ?.map(item => {
    let str = item.name;
    currentDataSource.nodeSeparatorList.forEach(
      rule => (str = str.replaceAll(rule, specialChar)),
    );
    return str;
  })
  .map(tempStr => tempStr.split(specialChar));

// 构造树数据  key为id 拼%+index， 到时候调接口时，按%去截取就可以了
treeList = list.map((ary, index) => {
  const { id, ...restProps } = treeList[index];
  return convertTree(
    ary,
    treeList[index]?.id,
    { ...restProps, rootId: currentDataSource.id },
    index,
  );
});

// 传 [a,b]  =>  [{key:a,children:[{key:b}]}]
// 根据树节点分割树
const convertTree = (list, id, restProps, count) => {
  if (!id) return;
  const rootName = list[0] || '--';
  const rest = list.splice(1);
  const key = id + '%' + count + 1;

  if (rest.length === 0) {
    return {
      key,
      id: key,
      ...restProps,
      isLastNode: true,
      name: rootName,
    };
  }
  return {
    key,
    id: key,
    ...restProps,
    name: rootName || '--',
    children: [convertTree(rest, id, restProps, count + 1)],
  };
};

[NemoZhong]

• 给定一个数组，根据两个字段排序后，计算排名，123位，如果有并列第一 就展示 1123，以此类推

[NemoZhong]

    _rankList.sort((a, b) => compare(a, b, 'averagePrice', 'averageFloatPrice'))

    let rank = 0
    const rankAry = []
    _rankList.reduce((prev, cur) => {
      if (
        prev.averagePrice !== cur.averagePrice ||
        prev.averageFloatPrice !== cur.averageFloatPrice
      ) {
        rank++
      }
      rankAry.push(rank)
      return cur
    }, {} as any)

    setRankList(
      _rankList.map((item, index) => ({
        ...item,
        rank: rankAry[index],
      }))
    )

export const compare = (a, b, key1, key2) =>
  a[key1] - b[key1] || a[key2] - b[key2] || 0

[NemoZhong]

• 对应的如果给定一个数组，按多个key排序，数字比较大小，其他的比较ascII码

[NemoZhong]

 export const compare = (
    a: object,
    b: object,
    sortKeysAry: { key: String, type: 'asc' | 'desc' }
  ) => {
    let res
    sortKeysAry.forEach(({ type, key }) => {
      res = res || type === 'asc' ? a[key] - b[key] : b[key] - a[key]
    })
    return res || 0
  }

[NemoZhong]

• nextjs中，服务端渲染的页面，用到localstorage的数据时，一般情况下初始值store从storage里取值有什么问题

[NemoZhong]

服务端没有localstorage，上述方案只兼容了客户端的逻辑，服务端取不到localstorage，会报警告text content did not match. server: "xxx" client: "aaa"

解决方案：store里初始值不要去localstorage去取，useEffect初始化时，js去取storage里的数据手动赋值

[NemoZhong]

• the best drag drop lib is **react-sortable-hoc** (can drag both vertical and horizontal)

• the container needs the style over-flow: auto; to fix the boundary detech problem

• when the item is in a dialog,helperClass maybe looks useless. In fact, just make the zIndex high enough can solve the problem.

[NemoZhong]

• web在切换到后台或者切换到其他tab下，此时为【背景标签】状态 ✈️