“Wagmi useContractEvent监听器无法访问useState变量”

huangapple go评论76阅读模式
英文:

Wagmi useContractEvent listener can't access useState variable

问题

I'm stuck on this problem that I really can't make sense of.

当尝试从useContractEvent中的listener函数中访问hash状态变量时,它是未定义的。

我可以在useContractEvent之外的地方访问hash状态变量,但是一旦事件被触发并且我尝试在listener函数内部读取hash状态变量,它就变成了未定义的。

这是上下文问题吗?

英文:

I'm stuck on this problem that I really can't make sense of.

When trying to access the hash state variable from the listener function in useContractEvent it is undefined.

I can access the hash state variable outside of the listener function in useContractEvent but as soon as the event is triggered and I try to read the hash state variable inside the listener function it is undefined.

Is it a context issue?

const [hash, setHash] = useState<`0x${string}` | undefined>();

useContractEvent({
  address: contract.address as `0x${string}`,
  abi: contract.abi,
  eventName: "SomeEvent",
  listener(log) {
    console.log(hash) // undefined
    if (log[0]?.transactionHash != hash) return;
    // never reached
  },
});

const { write } = useContractWrite({
  address: contract.address as `0x${string}`,
  abi: contract.abi,
  functionName: "someFunction",
  args: [],
  onSuccess(data) {
    setHash(data.hash);
  },
});

return (
 <button onClick={() => write?.()}>
    Go
  </button>
);

答案1

得分: 1

Yes, the issue you're facing is likely due to a context problem related to closures and the asynchronous nature of useContractEvent and useContractWrite.

一种方法是使用 ref 来始终访问 hash 的最新值。

const hashRef = useRef<`0x${string}` | undefined>();

useContractEvent({
    address: contract.address as `0x${string}`,
    abi: contract.abi,
    eventName: "SomeEvent",
    listener: (log) => {
        console.log(hashRef.current); // 这将始终记录 `hash` 的最新值
        if (log[0]?.transactionHash !== hashRef.current) return;
        // 不会执行到这里
    },
});

const { write } = useContractWrite({
    address: contract.address as `0x${string}`,
    abi: contract.abi,
    functionName: "someFunction",
    args: [],
    onSuccess(data) {
        hashRef.current = data.hash; 
    },
});

return <button onClick={() => write?.()}>Go</button>;
英文:

Yes, the issue you're facing is likely due to a context problem related to closures and the asynchronous nature of useContractEvent and useContractWrite.

One approach is to use ref to always access the latest value of hash

const hashRef = useRef&lt;`0x${string}` | undefined&gt;();

useContractEvent({
    address: contract.address as `0x${string}`,
    abi: contract.abi,
    eventName: &quot;SomeEvent&quot;,
    listener: (log) =&gt; {
        console.log(hashRef.current); // This will always log the latest value of `hash`
        if (log[0]?.transactionHash !== hashRef.current) return;
        // never reached
    },
});

const { write } = useContractWrite({
    address: contract.address as `0x${string}`,
    abi: contract.abi,
    functionName: &quot;someFunction&quot;,
    args: [],
    onSuccess(data) {
        hashRef.current = data.hash; 
    },
});

return &lt;button onClick={() =&gt; write?.()}&gt;Go&lt;/button&gt;;

huangapple
  • 本文由 发表于 2023年8月4日 20:44:24
  • 转载请务必保留本文链接:https://go.coder-hub.com/76836041.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定