如何在功能组件中使用回调解决 "too many re-renders"？

Question

我有一个像

这样的功能组件

function Blurg(props) {
  const [state, setState] = useState(..);
  
  const callback = (data) => { .. setState(...) }

  somethingExternal.addListener(callback);

  return ...
}

如果存在值，将立即调用回调。

(编辑：该值将保留，因此每次附加侦听器时它都会立即收到该值。)

但这会导致出现“重新渲染次数太多”的错误，因为状态已更改，然后再次调用功能组件（我猜），再次添加侦听器等等。

如何解决？

Answer 1

使用像

这样的one-time效果解决了它

useEffect(() => {
  somethingExternal.addListener(...)
  
  // And as a bonus
  return () => {
     somethingExternal.removeListener(...)
  }
}, []);

说明

useEffect 的第二个参数是依赖项列表，更改后会触发 re-evaluated 的效果。因此，如果传递一个空的依赖列表，什么都不会改变。

如何在功能组件中使用回调解决 "too many re-renders"？

How to resolve "too many re-renders" with callback in functional component?

reactjs

react-functional-component

说明