javascript - 更新 useEffect 内的监听器内的状态

Question

我有一个叫做 useQueryEvents 的钩子(Hook)1)为用户获取所有过去的交易，2)监听网络的传入/传出交易。在这两种情况下，事务都被传递到函数 addActionToActivity这只是将它附加到事件数组并在键 activity 下的上下文状态中更新它.
我无法让事件正确同步。每当状态更新时，它都没有最后一笔交易，因为它总是落后一步。如果我添加 activity依赖它工作，但随后启动一个新的监听器(由于使用新的 activity 值再次调用整个函数)，这会导致无限循环，不断切换状态。

function useQueryEvents() {
  const { state: { connectedNetwork, selectedWallet, activity },
  } = useContext(LocalContext);

  useEffect(() => {
    async function bootstrapQueryEvents() {
      // First get all the past transactions
      const transactions = await getAllPastTransactions();
      const contract = await getContract();

      // Now save them to context state via addActionToActivity
      await addActionToActivity(transactions, activity);

      // Now that all the past transactions have been saved
      // listen to all incoming/outgoing transactions and
      // save to context state via addActionToActivity
      contract.on('Transfer', async (from, to, amount, event) => {
        console.log(`${from} sent ${ethers.utils.formatEther(amount)} to ${to}`);
        const transaction = await formatEventToTransaction(event);
        await addActionToActivity(transaction, activity);
      });
    }

    bootstrapQueryEvents();
  }, [selectedAsset, connectedNetwork, selectedWallet]); // <- I've tried adding `activity` here
}

在访问更新的 activity 的同时，我可以如何处理更新状态的任何想法监听器内的值 没有 开始一个新的监听器实例？或者也许我可以完全采取不同的方法？
提前致谢

Answer 1

您可以通过将逻辑拆分为两个 useEffects 来解决此问题。现在你做两件事:

您获取交易

设置事件监听器

问题是如果不同时做这两件事，你就不能再次运行这个钩子(Hook)。正如您所说，事件对象不是您想要的，因为事件对象是在设置事件监听器时传递的。
将其拆分为两个钩子(Hook)可能如下所示:

function useQueryEvents() {
  const { state: { connectedNetwork, selectedWallet, activity },
  } = useContext(LocalContext);
  const [contract, setContract] = React.useState()

  // Fetch transactions and setup contract
  useEffect(() => {
    async function fetchTransactionsAndContract() {
      const transactions = await getAllPastTransactions();
      const contract = await getContract();
      
      await addActionToActivity(transactions, activity);

      setContract(contract)
    }
  }, [])

  // Once the contract is set in state, attach the event listener. 
  useEffect(() => {
    if (contract) {
      const handleTransfer = async (from, to, amount, event) => {
        console.log(`${from} sent ${ethers.utils.formatEther(amount)} to ${to}`);
        const transaction = await formatEventToTransaction(event);
        await addActionToActivity(transaction, activity);
      }

      contract.on('Transfer', handleTransfer);

      // Remove event listener, I imagine it will be something like
      return () => {
        contract.off('Transfer', handleTransfer)
      }
    }
    // Add contract and activity to the dependencies array.
  }, [contract, activity, selectedAsset, connectedNetwork, selectedWallet]);
}

我还想指出，删除和重新附加事件监听器非常好。