新增了搜寻功能
目前资料全部包在程式里所以搜寻非常及时
为了可能要接 API 搜寻避免所以过于频繁打 API 用了
* react-debounce-input
这是可以直接 drop-in replace input tag 的套件,
主要功能顾名思义就是要 debounce,意思是每隔一段时间再处理事件
以搜寻来说如果每打一个字就会有一个事件,
但是对使用者来说可能根本就不需要打每个字就搜寻一次
这个时候 debounce 就很好用了
整个搜寻功能做完之后又调了有的没的的发现遇到 React 最常遇到的 re-render 问题
因为每次操作都有可能因为一些状态改变 re-render
所以发生了按个搜寻按钮整个页面都 re-render
画面就一直闪来闪去快眼瞎了
原本想要用算是业界标准做法的 React-Redux 来管理这些物件状态的,
但是光看教学文件还没有写自己的东西就要弄一堆定义还是什么的
https://react-redux.js.org/tutorials/typescript-quick-start
前端猴子都写这种没办法维护的程式码吗
所以改用之前用过的 react-superstore 整个简单很多
感觉我好像是唯一的使用者
改为这种状态管理方式后就解决了大部分 re-render 的问题
※ 引述《nh60211as (xXx_5354M3_31M0_xXx)》之铭言:
: 考量到如果是要在活动会场当天使用网络可能会不稳定
: 所以加了手机安装离线程式教学
: https://i.imgur.com/eu2GXKH.png
: https://github.com/nh60211as/FfMapMarker/blob/master/docs/
: install_on_andriod.md
: 因为是用 PWA 包装的,所以可以让网页就像 Android app 一样像一个程式在管理
: iOS 好像也行,但是我没钱买 iPhone
: 然后买狗摊
: Day 1 Day 2 Day 3
: 角角吉诊室 E27,E28
: 台北人 S03,S04 S33
: 企鹅冰屋 S05 S30
: 坏孤儿 T27,T28
: 龙龙 S25,S26 S25,S26
: 百合室内盆栽 S27 S27
: ※ 引述《nh60211as (xXx_5354M3_31M0_xXx)》之铭言:
: : 懒得用手画地图了
: : 科技时代就该把可以离线做的事情搬上网页
: : https://i.imgur.com/UhPki5S.png
: : 看了一下有买狗的好像是在第二天 S 区
: : https://nh60211as.github.io/FfMapMarker/