使用对象作为参数的无限循环useEffect[Rreact_Native]

Question

const [ state, setState] = useState({
casas: [],
casaSelecionada: '',
});


useEffect(()=>{
dbref.once('value', function(snapshot, prevChildKey){
setState({
casas:(Object.entries(snapshot.val())).map( e => e[1].casaItem),
});
});
dbref.off('value'); // according to the firebase website itself,  
//this function serves to remove all callbacks 
// from one location.
},[]);

我开始使用钩子，在尝试设置状态时遇到了一个无限循环问题，我已经在几个论坛上查看了，所有可能的解决方案都没有解决我的问题。我碰巧试图设置一个对象数组，当我发送更新时，它说它不将"state.casas"识别为对象，但当我在"[]"内传递"state.ca萨斯"作为useEffect中的第二个参数时，它仍然处于循环中。有人能帮我吗？

Answer 1

由于state.casas不断更新，您将得到一个无限循环。每次firebaseon的处理程序触发更新state.casas时，都会导致钩子执行。除此之外，每次执行钩子时，它都会创建新的firebase订阅，这些订阅除了其他现有订阅之外还会运行，每次更新casas都会不断导致钩子的更多执行。您的useEffect可能只应该运行一次，因为单个firebase订阅最多是该ref获得实时更新所需的。此外，将处理程序移动到一个函数将使在组件卸载时更容易清理订阅：

const [state, setState] = useState({
casas: [],
casaSelecionada: '',
});
useEffect(() => {
// Move logic to a shared handler for easier `on`/`off`
function handleValueChange(snapshot, prevChildKey) {
setState(prevState => {
return {
...prevState,
casas: (Object.entries(snapshot.val())).map( e => e[1].casaItem),
};    
});
}
dbref.on('value', handleValueChange);
// Return a function that you can unsubscribe from firebase to avoid leaks
return () => {
dbref.off('value', handleValueChange);
}
}, []);

请注意，在包含off的钩子的末尾返回了一个cleanup函数。这是为了在组件卸载时删除订阅。否则可能会发生泄漏。请注意，这是一个返回的函数。在您的示例中，您只是简单地调用off，而不是返回一个函数，这就是钩子上的指南所指示的。如果您决定使用once，那么您可能不需要清理功能，但如果您需要不断的实时更新，once可能还不够。

希望这能有所帮助！