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

Question

我有一个类似的功能组件

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

const callback = (data) => { .. setState(...) }
somethingExternal.addListener(callback);
return ...
}

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

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

但这导致了一个错误，即"；太多的重新渲染"；，因为状态发生了变化，所以再次调用功能组件(我想(，再次添加监听器，以此类推。

如何解决此问题？

Answer 1

使用等一次性效果解决

useEffect(() => {
somethingExternal.addListener(...)

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

解释

useEffect的第二个参数是依赖项列表，当更改时，将触发重新评估效果。因此，如果传递了一个空的依赖项列表，则不会有任何变化。