当useContractCall的结果从useDapp到达反应钩子时收到通知吗？

Question

我认为这更多是一个反应问题；

export function useData() {
    const [Data]: any = useContractCall({
        abi: myContractInterface,
        address: myContractAddress,
        method: "getAllData",
        args: [],
    }) ?? [];
    return Data;
}
let myData = useData();
<div>{myData ? myData.name : "no Data yet"}</div>

当UseData()被传播时，将调用myData ()并呈现视图；但是如何在逻辑中的其他地方使用myData呢？尝试使用异步包装器并等待，但没有工作。

我试图使用useEffect侦听myData的更改并作出反应，但是useEffect立即被触发，myData为null。

  let myData = useData();
  
  useEffect(() => {
    console.log("Fresh Data is here",myData);//rotten undefined, not fresh data
  }, [myData ])

我应该用这样的东西吗？我是说它起作用了。但

const x = useData();

(async() => {
    console.log("waiting for variable");
    while(!x) // define the condition as you like
        await new Promise(resolve => setTimeout(resolve, 1000));
    console.log("variable is defined",x);
})();

Answer 1

很难弄清楚所有的自定义钩子之间的联系。最后，我有一些“在链中的最后一个”钩子执行异步请求，并且在接收到响应之后，在const x中使用新值重新呈现触发器。

有了这个假设，我想说你不需要

(async() => {
    console.log("waiting for variable");
    while(!x) // define the condition as you like
        await new Promise(resolve => setTimeout(resolve, 1000));
    console.log("variable is defined",x);
})();

就在渲染逻辑中。而且，这是行不通的。在这个特定的呈现执行过程中，const x = useData()永远不会改变。它将/可能只在下次重呈现运行时重新分配。

相反，您应该返回一些呈现结果，就像它在那里一样。它将是-最初是null(用您的话说)，但是稍后组件将使用x中的实际数据重新呈现。

const x = useData();

....
return <SomeComponent prop={x} />

而且你也应该用你的

useEffect(() => {
  console.log("Fresh Data is here",myData);
}, [myData])

与最初一样，它打印null，然后转储实际数据。

一旦重新呈现不像我上面描述的那样发生-问题就在你的自定义钩子的某个地方。您需要使用调试器来调试它。