Firebase与React结合在无限循环中返回

我想将Firebase与React Hooks结合使用。数据结构的想法是：

• 首先从firebase数据库中获取所有数据


• 从此数据创建状态对象，以便您可以将此数据向下传递到组件


• 创建对象后，我想在数据库上添加所有观察者。


• 当数据库中发生更改时，该对象将被更新并
  再次发送组件


• 在组件中，将使用withMemo检查道具中的数据是否已更改（如果更改，将重新呈现组件）

现在的问题是当将一个新项添加到表之一（因此已调用child_added函数）并且在child_added函数内部时，将更新对象，它将在无限循环中创建。发生这种情况是因为状态对象导致文件的重新呈现，然后运行child_added函数来更新状态对象，依此类推。
当前代码是：

/** Child Once */
listner.child('widgets').once('value',onValue).then(() => {});
/** Child Changed */
listner.child('widgets').on('child_changed',onValueChange);
/** Child Added */
listner.child('widgets').endAt().limitToLast(1).on('child_added',onValueAdded);


onValueAdded函数：

/** onValueAdded */
const OnValueAdded= function(dashboard) {
//Function thats updating the widgetData object
updateWidgetData(dashboard.val(),dashboard.key,userId);
//Updating the object resulting in a loop
setWidgetDataInit(prevState => {
return { ...prevState,...widgetData };
});
};


因此，在设置setWidgetDataInit状态后，文件将重新加载并将更新对象传递到子组件（如果更改了prop值，则会导致子组件更新）

问题是如何在不创建无限循环的情况下更新对象状态，而是在新添加的项上设置Firebase观察程序，因此可以将对象状态内的新数据发送到子组件，并在以下情况下重新渲染