顶部日期从本周切到上周,成交额图变了,渠道图和地域图还是旧数据,三张图对不上,用户以为数据出错。第一次遇到会往复杂处想,其实漏掉的多是个小前提。
const [range, setRange] = useState(defaultRange); // 三张图的请求参数都从 range 派生
每个图表组件各自请求数据,日期变化只通知了第一个组件。筛选状态没有做成共享源。这一点先确认清楚,后面就不用反复试。
「多图表筛选联动」相关的验证我通常做两遍,改完一次、隔天再看一次,确认不是临时生效。临时改动用注释写上日期和原因,过两周自己都记不清为什么这么写。
动手前把原文件复制一份带时间戳,出问题立刻换回去,比现场分析快得多。一次只改一处,改完立刻验证,几个改动叠在一起,出问题就说不清是谁导致的。
具体做法是,把筛选条件提到共同父级 只维护一份状态;变化时统一请求一次 再分发给各图表;切换后逐张核对横轴范围。
改完照着核一遍,切换日期后三张图的横轴范围和合计数字同时更新。
