Javascript UseEffect不是由依赖项触发的吗？

有人能帮我吗？我真的很感激：） 这里的问题是，当宽度和高度发生变化时，UseEffect不会再次运行。 这是一个正在调整大小的文本区域

const [elem, setElem] = useState<HTMLElement>(document.createElement('textarea'))
const width = window.getComputedStyle(elem, null).getPropertyValue("width");
const height = window.getComputedStyle(elem, null).getPropertyValue("height");

   useEffect(() => {
      setElem(document.getElementById("email") as HTMLElement) 
      console.log(width, height)
   },[elem, width, height])

const[elem，setElem]=useState（document.createElement（'textarea'））
常量宽度=window.getComputedStyle（elem，null）.getPropertyValue（“宽度”）；
const height=window.getComputedStyle（elem，null）.getPropertyValue（“height”）；
useffect（（）=>{
setElem（document.getElementById（“email”）作为HTMLElement）
控制台。原木（宽度、高度）
}，[元素、宽度、高度]）

使用

useState

设置宽度和高度

const [width, setWidth] = useState(undefined);
const [height, setHeight] = useState(undefined);


useEffect(() => {
  const getWidth = () => window.getComputedStyle(elem, null).getPropertyValue("width");

  const getHeight = () => window.getComputedStyle(elem, null).getPropertyValue("height");
  const resizeListener = () => {
      setWidth(getWidth())
      setHeight(getHeight())
    };

  window.addEventListener('resize', resizeListener);

  resizeListener();
  // Don't foget cleanup!
  return () => window.removeEventListener('resize', resizeListener);
  // There's a dependency on the element, so if that changes, re-run the effect
}, [elem])

---

连接resize事件侦听器，并使用setWidth和setHeight更新宽度和高度。

@William wang的想法是正确的。您的代码不会重新触发效果，因为值永远不会更改，除非代码由于其他原因重新呈现

虽然他在窗口上使用调整大小侦听器的方法将更新宽度和高度，但只有在窗口大小改变时才会发生这种情况

我已经修改了代码以使用更新的。更多详情请参阅

这样，就可以得到准确和最新的尺寸变化。这种方法的唯一问题是。虽然现在所有的主流浏览器似乎都支持它

const{useState，useffect，useRef}=React；
函数示例（）{
常量elemRef=useRef（null）；
const[width，setWidth]=useState（未定义）；
const[height，setHeight]=使用状态（未定义）；
useffect（（）=>{
如果（！elemRef.current）{
返回；
}
常量resizeListener=（）=>{
设置宽度（elemRef.current.offsetWidth）；
设置高度（elemRef.current.offsetHeight）；
};
const observer=新的ResizeObserver（resizeListener）；
观察者。观察者（elemRef.current）；
//别忘了清理！
return（）=>observer.disconnect（）；
}, []);
返回(
宽度：{width}


高度：{height}


);
}
ReactDOM.render（，document.getElementById（'root'））
只有在组件重新渲染时才能获得这些值。仅仅因为窗口已调整大小，并不意味着组件将重新渲染。您应该向窗口（或文本区域元素）添加一个调整大小事件侦听器，该窗口（或文本区域元素）在状态中存储新的宽度/高度。这将触发重新渲染