Javascript 如果条件为useRef（）且元素样式为Reactjs的线夹，则不会更新DOM节点

实际上，我将段落（HTML标记段落）截短为4行，然后使用查看更多和查看更少隐藏和显示段落的其余行。 这是我的示例代码

  const [Visible, setVisible] = useState(false);

useEffect(() => {
 if(ref.current){
 if(Visible)
 setStyle({
  'display': 'unset',
      '-webkit-line-clamp': '4',
      '-webkit-box-orient': 'vertical',  
      'overflow': 'hidden'
  })

 if(!Visible)

   setStyle({
  'display': '-webkit-box',
      '-webkit-line-clamp': '4',
      '-webkit-box-orient': 'vertical',  
      'overflow': 'hidden'
  })
   }
 },[Visible])

这是我的按钮代码

   {(ref.current && 
     (ref.current.offsetHeight < ref.current.scrollHeight)) 
   &&  <span 
            onClick={() => {
              setVisible(!Visible);
            }}>
            
            <span>{Visible ? "See less" : "See more"}</span>
          </span>}

{（参考当前&
（参考当前偏移视线<参考当前滚动高度））
&&   {
setVisible（！Visible）；
}}>
{可见？“少看”：“多看”}
}

这是我发呆的一段

<p  ref={ref} style={style} dangerouslySetInnerHTML={{__html: Format.displayValue(description)}} className={"description"}></p>

因此，当点击截短的段落时，它会在4行之后创建点，但是查看更多或查看更少按钮会因为上述情况而停止显示

ref.current.offsetHeight

不按预期工作

ref.current.offsetHeight

具有旧的偏移高度，稍后当我单击屏幕上的其他内容时，它会得到更新