dom更改后如何使用react hooks强制更新答案

【问题标题】：How to force update after dom change with react hooksdom更改后如何使用react hooks强制更新
【发布时间】：2020-07-29 19:11:59
【问题描述】：

我有一个渲染 svg 路径的组件，并希望在该路径的底部渲染另一个组件。路径组件看起来像这样。其中 {d} 来自一个数组，该数组被转换为 'M0,0,L100,120,L0,240'。

<svg>
  <path
    ref={pathRef}
    d={d}
    ...
  >
  </path>
</svg>

我有一种方法可以向该路径添加一个点。并且在渲染路径之后（domNode 的高度发生变化）我希望在底部渲染另一个组件。

在父级中我使用 useEffect() 来获取 pathRef.current.getBoundingClientRect().height;

但无论我做什么，我总是得到旧状态的高度。最终的 dom 更改似乎不会触发我的组件中的更新。

我错过了什么？我尝试了 useLayoutEffect()，我什至尝试在任何 useEffect 之外控制台记录当前高度，但我从未得到最新值。

【问题讨论】：

【解决方案1】：

Ciao，尝试将useState 与useCallback 挂钩结合使用。喜欢：

const [, updateComponent] = React.useState();
const forceUpdateComponent = React.useCallback(() => updateComponent({}), []);

然后，当您需要重新渲染时，只需调用 forceUpdateComponent()。

【讨论】：