无法获取更新后的状态值 useState 和 UseEffect

Posted 2023-02-25

【中文标题】无法获取更新后的状态值 useState 和 UseEffect

【英文标题】：Cannot get the updated the state value useState and UseEffect

【发布时间】：2020-05-07 17:46:28

【问题描述】：

我想获取状态的最新值并使用内联样式，但它首先返回 0 值，然后渲染更新状态。但是，我无法将值分配给样式。

const ImageCard = ( image:  alt_description, urls  ) => 
  const [spans, setSpans] = useState(0);
  const imageRef = useRef(null);

  useEffect(() => imageRef.current.addEventListener('load', () => 
    const height = imageRef.current.clientHeight;
    const spans = Math.ceil(height / 10);
    setSpans( spans );
  ));

  return (
    <div style= gridRowEnd: `span $spans` >
      <img ref=imageRef alt=alt_description src=urls.regular />
    </div>
  );

控制台输出：

10 0
spans: 15
spans: 33
...

【问题讨论】：

这个组件的父级是否有display: grid？

@ShubhamKhatri 是的，它有

【参考方案1】：

您不需要useEffect。可以使用img标签的onLoad事件如下：

const ImageCard = ( image:  alt_description, urls  ) => 
  const [spans, setSpans] = useState(0);

  const imageLoaded = e => 
    const height = e.currentTarget.clientHeight;
    const spans = Math.ceil(height / 10);
    setSpans( spans );
  ;
  //Dont forget to remove this line
  console.log(spans);
  return (
    <div style= gridRowEnd: `span $spans` >
      <img onLoad=imageLoaded alt=alt_description src=urls.regular />
    </div>
  );
;

Working code sandbox example