react hook组件使用createIntersectionObserver时，除去第一个元素外其他元素无法被观察

[codeLose]

相关平台

微信小程序

小程序基础库: 8.0.14
使用框架: React

复现步骤

子组件

import React, { useState, useEffect, useRef } from "react";
import Taro, { canIUse} from "@tarojs/taro";
import { View, Image,  } from "@tarojs/components";
import getImageUrl from 'utils/getImageUrl'

import { VideoByLabel } from 'types/Live'

import style from './index.module.css'

const VideoCard:React.FC<VideoByLabel> = ({
  videoTitle,
  videoPicture,
  videoId,
  ...rest
}) => {
  const imageRef = useRef()
  const [picSrc, setPicSrc] = useState<string>('')


  useEffect(() => {
    if (canIUse('createIntersectionObserver')) {
      setTimeout(() => {
        if (imageRef.current) {
          //@ts-ignore
          const intersectionObserver = Taro.createIntersectionObserver().relativeToViewport({ top: 0, bottom: 0 })
          intersectionObserver.observe(`#${videoId}`, (res:any) => {
            console.log(res, 'rrrrr')
            const { id } = res
  
            if (res.intersectionRatio > 0){
              setPicSrc(videoPicture)
            }

            intersectionObserver.disconnect()
          })
        }
      }, 100)
    }

  }, [imageRef.current, videoPicture, videoId])

  return (
    <View ref={imageRef} className={style['video-card']} >
      <View className={style['video-card_image-content']}>
        <Image ref={imageRef} id={videoId} className={style['video-card_image']} mode='aspectFit' src={getImageUrl(picSrc)} lazyLoad />
      </View>
      
      <View className={style['video-card_title']}>{videoTitle}</View>
    </View>
  )
}

export default VideoCard

父组件

        <ScrollView
          enableFlex={enableFlex}
          // ref={imageRef}
          scrollX={scrollX}
          scrollY={scrollY}
          className={style['tab-list_scroll-container']}
          onScrollToLower={handleScrollToLower}
          style={{  height: `${screenHeight - topHeight}rpx`, ...scrollViewStyle, }}
        >
          {
            !!list.length ? list.map((item, index) => {
              return <VideoCard {...item} key={index} />
            }): (
              isEmpty && <View className={style['tab-list_scroll-no-data']}>
                <Image src={emptyPng} className={style['tab-list_scroll-no-data-img']} />
                <View className={style['tab-list_scroll-no-data-text']}>当前没有相关内容</View>
              </View>
            )
          }
        </ScrollView>

期望结果

所有的id都被监听

实际结果

第一张图片被监听到 其余图片无法被监听

[pages/index/index] Node "#5cb712a7466240c08a3019a174fa40e7" is not found. Intersection observer will not trigger.
[pages/index/index] Node "#2202536b7c86402792d5cfe14b0ea76e" is not found. Intersection observer will not trigger.
[pages/index/index] Node "#0a4059b6112f40d0a1007995b6e15a4f" is not found. Intersection observer will not trigger.

环境信息

👽 Taro v3.2.8


  Taro CLI 3.2.8 environment info:
    System:
      OS: macOS 10.15.7
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 14.17.2 - /usr/local/bin/node
      Yarn: 1.22.11 - /usr/local/bin/yarn
      npm: 6.14.13 - /usr/local/bin/npm
    npmPackages:
      @tarojs/cli: 3.2.8 => 3.2.8 
      @tarojs/components: 3.2.8 => 3.2.8 
      @tarojs/mini-runner: 3.2.8 => 3.2.8 
      @tarojs/react: 3.2.8 => 3.2.8 
      @tarojs/runtime: 3.2.8 => 3.2.8 
      @tarojs/taro: 3.2.8 => 3.3.10 
      @tarojs/webpack-runner: 3.2.8 => 3.2.8 
      babel-preset-taro: 3.2.8 => 3.2.8 
      eslint-config-taro: 3.2.8 => 3.2.8 
      react: ^16.10.0 => 16.14.0 

[codeLose]

id问题 换成img + index 就行 虽然不知道为啥

[BongBongBang]

我这是跟id 也没关系，就是不能用，醉了

[swift98]

请问下为啥这个监听要放到一个setTimeout里呢，我在使用中发现必须加一个比较大的延时才能生效，可能和页面的渲染速度有关，那只能设一个比较大的延时，有没有什么办法可以解决这个问题呢