列表设置本地缓存

需求：树形结构列表，两个子模块，分别通过tap(group_by)不同字段调用同一个接口获得数据，由于数据量过大，用户加载等待时间较长，要求设置localStorage

实现：

原本写法：由于都是通过同一个接口调用（只不过传递给后端的字段不同），通过useState当中的tap判断用户想要查询的模块，在调用接口中使用tap动态控制，每一次根据tap值是否变动来调用接口，且生成树结构和更新树形结构状态的方法并没有抽象出来同时都写在调用接口的方法里

改进写法：

抽象生成树形结构、更新树形结构状态方法generateTree\updateTreedata

每一次使用调用接口方法之前判断tap,使其分别存储在不同的localstorage中而不会覆盖

//搜索防抖
  const debounceSearch = useCallback(
    _.debounce((value) => {
      tap==='1' ? getEntData(value,'AreaData',tap) : getEntData(value,'IndustryData',tap)
    }, 3000),
    []
  )
 
  //value表示模糊搜索的值，AreaData和IndustryData表示存储在localstorage中的key,tap为state中表示模块的标识
   useEffect(() => {
    setLoading(true);
    tap === '1' ? getEntData('','AreaData',tap) : getEntData('','IndustryData',tap)
  }, [tap])

localstorage判断修改

 const getEntData= async(entName,localName,tap) => {
    const entDataList=localStorage.getItem(localName)
    if(entDataList){
      console.log('entDataList使用缓存数据')
      const res=JSON.parse(entDataList)
      const treeData=generateTree(res)
      updateTreeData(treeData);
      return
    }
     //不存在缓存
    const res=await getEnterpriseData({ group_by: tap,
ent_name: entName,})

      if(entDataList!== JSON.stringify(res)){
        console.log('不一致，entDataList使用接口数据');
        const treedata=generateTree(res)
        updateTreeData(treedata)
        localStorage.setItem(localName, JSON.stringify(res));
      }

  }

页面适配百分百

需求：根据用户屏幕分辨率自动适配屏幕大小，使内容都在页面上展示，不会因为屏幕尺寸而出现展示不完全的状态

解决：原本记得是写过百分比适配的问题，经过排查发现，是由于其中的子组件的echarts给其设置了一个固定的vh而不是百分比，使其不能受到原有flex布局的约束，仍然占据空间

//原先
<div>
        <Echarts option={option} height={'24vh'} width={'100%'}  />
        </div>

//修改后
 <div style={{height:'100%' }}>
        <Echarts option={option}  width={'100%'}  />
 </div>

Antd message组件

需求：当用户多选的按钮达到3个以上时，提示错误信息

解决：antd官方message中推荐到hooks写法报错，经查看相关issue后，直接使用：

 message.warning('最多选择三个按钮')

即可

前端实习周记10

列表设置本地缓存

页面适配百分百

Antd message组件