如何调用React中存储在useState里的对象自带的方法？

问题原因排查与解决方案 #

首先明确一个基础逻辑：React的useState本身不会将存储的对象转为只读，你遇到的无法调用方法的问题，本质是两种常见情况：

1. 调用方法时provider还处于初始化阶段，值为null
2. 第三方库返回的provider实例本身做了冻结处理，或者你错误解构方法导致this上下文丢失

最优解决方案

因为你的provider是一次初始化、后续不需要修改实例本身、只需要调用实例方法的场景，优先用useRef存储实例引用，搭配useState同步实例状态来满足只读渲染的需求，修改自定义Hook如下：

import { useState, useEffect, useRef } from 'react';

export const useSomeHook = () => {
    // 用ref存实例引用，完全不会限制实例方法调用
    const providerRef = useRef(null);
    // 保留state用于需要provider变化触发重渲染的只读场景
    const [provider, setProvider] = useState(null);
        
    useEffect(() => {
        // 第三方库初始化逻辑
        const thirdPartyInstance = 你的初始化代码;
        providerRef.current = thirdPartyInstance;
        setProvider(thirdPartyInstance);
    }, []);
    
    return [provider, providerRef];
} 

调用方法时直接使用ref访问实例即可，同时增加初始化判断避免空值报错：

// 从Hook拿到ref
const [provider, providerRef] = useSomeHook();

// 用户交互触发txHash变化后调用方法
const handleTxSubmit = (txHash) => {
  if (providerRef.current) {
    providerRef.current.once(txHash, (transaction) => {
        // 交易确认后的业务逻辑
    })
  }
}

如果你的问题是因为解构方法导致上下文丢失，只要保持实例.方法()的调用形式即可，不需要额外修改存储逻辑。

内容的提问来源于stack exchange，提问作者J.Doe