使用對象作為參數的無限循環 useEffect [React_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 時遇到了無限循環問題，我已經查看了幾個論壇，所有可能的解決方案都沒有解決我的問題。 我碰巧試圖設置一個對象數組，當我發送更新時，它說它不能將“state.casas”識別為 object，但是當我將“state.casas”作為 useEffect 里面的第二個參數傳遞時“[]”，它仍然在循環中。 有誰能夠幫我？

Answer 1

你得到一個無限循環，因為state.casas正在無休止地更新。 每次更新state.casas on觸發器上的 firebase 的處理程序時，它都會導致掛鈎執行。 除此之外，每次鈎子執行時，它都會創建新的 firebase 訂閱，這些訂閱與其他現有訂閱一起運行，每次更新casas都會不斷導致更多的鈎子執行。 您的useEffect應該只運行一次，因為單個 firebase 訂閱最多是您獲得實時更新所需的那個參考。 還將處理程序移動到 function 將更容易在組件卸載時清理訂閱：

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);
  }
}, []);

請注意清理 function 在包含off的鈎子末尾返回。 這是在組件卸載時刪除訂閱。 否則你可能會有泄漏。 請注意，這是一個返回的 function。 在您的示例中，您只是off而不是返回 function ，這是掛鈎指南所指示的。 如果您決定使用once ，那么您可能不需要清理 function，但如果您需要不斷的實時更新， once可能還不夠。

希望這會有所幫助！