稍后如何对存储在 useState 中的对象使用方法？

Question

我有一个像这样的自定义挂钩：

export const useSomeHook = () => {
    const [provider, setProvider] = useState(null);
        
    useEffect(() => {
        // init stuff using third party library
        setProvider(...);
    }, []);
    
    return [provider];
}

在应用程序中，我在某处以只读模式使用，但是 provider 也有我想使用的方法，如下所示：

provider.once(txHash, (transaction) => {
    // Emitted when the transaction has been mined
})

问题出在useState，它创建了一个只读对象，所以我不能使用提供者的方法。我不能只传入数据来在钩子中初始化这个函数，因为 txHash 是随着用户交互而变化的东西，并且提供者连接到 websocket（在初始化期间由第三方库启动。）

Answer 1

我想如果你使用 useRef 而不是 useState 应该可以工作

export const useSomeHook = () => {
    const providerRef = useRef(null);
        
    useEffect(() => {
        // init stuff using third party library
        providerRef.current = ...
    }, []);
    // you don't need to put it in an array since it's only one item
    return providerRef.current;
}

稍后如何对存储在 useState 中的对象使用方法？

How to later use a method on a object that is stored in useState?

javascript

reactjs

react-hooks

use-effect

use-state