获取不到 id 元素的问题原因及解决办法

女爷i 2022-09-04 12:59 587阅读 0赞

> 感谢内容提供者：[金牛区吴迪软件开发工作室][Link 1]

> 提前声明，想要直接看解决办法的可直接略过中间部分点击： 五、问题解决

### 文章目录 ###

*  一、背景
 *  二、需求实现分析
 *  三、BUG出现
 *  四、DEBUG的过程
 *   *  第一步：排查生命周期
     *  第二步：增加了一个按钮去获取元素
     *  第三步：根据上一步调试过程查看时灵时不灵的原因
 *  五、问题解决

# 一、背景 #

前几天笔者在做小程序的时候有一个需求，根据页面参数进行锚点跳转。

拿到这个需求第一反应是这么简单这有啥的嘛，给动态渲染的每个元素加一个唯一的 id 然后就可以进行锚点跳转了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70]  
拿到这组数据我们即使没去看接口文档，但凭借着经验也能猜到，vocherId 和 \_uuid是唯一的。

> PS：因为页面布局的问题，所以没有用小程序的scroll-view组件，如果用scroll-view的话就很简单了~

# 二、需求实现分析 #

1.  给每一个动态渲染的元素增加一个唯一id，第一时间想到的就是用voucherId或者\_uuid
2.  然后我们肯定需要通过一个方法去拿到这个元素，在小程序里面是用：**createSelectorQuery** 方法去拿到元素。
3.  再就是我们需要通过boundingClientRect().exec()获取到这个元素的x，y轴位置。
4.  再就是我们需要在这个页面初始化之后去滚动到这个元素的 y 轴位置。  
    因为 remax 和 taro 一样是类似于react写法的小程序开发框架。那么我第一时间想到的就是**useEffect** 和 **componentDidMount** 这俩个api ，由于原先这个页面是函数式组件。那么我们就用useEffect。

> 这里用useEffect也有一点误扰到我debug的过程了。这里大家可以先知道一下，后面会说。

bug 开始…

# 三、BUG出现 #

我们上面的这个逻辑是没什么问题的。在正常的项目里肯定就直接跑起来了做完了这个功能。  
但是我们这里并没有完事。

问题：

1.  最开始用 voucherId 当 id + useEffect 始终拿不到元素
2.  然后用 \_uuid 当 id + useEffect 一会儿能拿到元素一会儿拿不到

> **PS**：这里其实已经能暴露一些原因了

# 四、DEBUG的过程 #

## 第一步：排查生命周期 ##

最开始我拿不到dom我第一时间想的其实是生命周期的问题。我当时猜测可能remax的生命周期可能和react的不太一样。很有可能在remax的useEffect的时候元素还没渲染完，所以拿不到。

于是我就翻remax的文档查。。。  
链接：[https://remaxjs.org/api/remax\#usenativeeffectcallback-deps][https_remaxjs.org_api_remax_usenativeeffectcallback-deps]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 1]  
看到这里我更加坚信了自己的想法：生命周期用错了。因为他说了useEffect只代表render完成了，不代表渲染完成。我的理解就是useEffect里拿不到真实的dom，在这里只是虚拟dom。

> PS：其实并不是生命周期的问题，后面整个复盘这个bug的时候看这个文档发现它文档里写的仅仅是更新的时候是这样的，我自己也试了一下，用useEffect也确实还是OK的

改用了useNativeEffect之后并没有解决问题。还是获取不到这个元素。  
于是我又纠结于用小程序的其他生命周期，最后毫无意外，全都是无功而返。时灵时不灵。

## 第二步：增加了一个按钮去获取元素 ##

因为我这时候还是怀疑是生命周期的问题，在那些生命周期里没get到元素是因为没渲染完成的原因。

所以我这边加了一个button，然后点击的时候去get元素。  
这样能保证这个元素肯定渲染完成，然后我点击的时候就基本上可能能get到了。  
只要在这里百分百能获取到元素的话，那么就证明了还是我生命周期用的问题。

结果在这里还是有的时候能get到元素，有的时候get不到元素。  
点击的时候能get到的话，那么我生命周期那里也能get到。  
所以这里的调试证明了不是我生命周期的问题。

那么问题其实已经很显而易见了。

## 第三步：根据上一步调试过程查看时灵时不灵的原因 ##

根据上一步的调试过程，我将所有的参数都打印出来了

1.  页面接收到的跳转锚点的参数：\_uuid
2.  页面渲染数据的data：assetList

在这里就找到问题所在了。  
每次能获取到元素的时候，那个生成出来的\_uuid都是字母开头的  
获取不到元素的时候，那个生成出来的\_uuid都是数字开头的

那么我们找到了问题所在就再尝试一下~  
把所有的\_uuid 前面都固定加上一个英文前缀。这样就能保证每次都能获取到元素了！

后面翻看了一下文档。找到了这个说明：  
[https://www.w3cschool.cn/htmltags/att-global-id.html][https_www.w3cschool.cn_htmltags_att-global-id.html]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 2]

# 五、问题解决 #

最终我们用 useNativeEffect + \`英文前缀-$\{item.\_uuid\}\` 这样就能保证id是正确的了  
找到了元素，后面就很简单了…

涉及到的锚点滚动的全部代码如下：

这样问题就解决了~  
如果你还没有解决可以评论在下方我们一起debug一下~

[Link 1]: http://wdstudio.top/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70]: /images/20220829/dcaebe2954514979894ebadac2974c7d.png
[https_remaxjs.org_api_remax_usenativeeffectcallback-deps]: https://remaxjs.org/api/remax#usenativeeffectcallback-deps
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 1]: /images/20220829/78ea072544294558973fb306b6beb4b2.png
[https_www.w3cschool.cn_htmltags_att-global-id.html]: https://www.w3cschool.cn/htmltags/att-global-id.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 2]: /images/20220829/d6963c4c6c694b60a18d5858b380d5c7.png