Reactjs 使用 React.useMemo 进行异步调用

场景相对简单:我们有一个在远程服务器上进行的长时间运行的按需计算.我们想把结果记下来.尽管我们从远程资源异步获取数据，但这并不是一个副作用，因为我们只想将计算结果显示给用户，我们绝对不想在每次渲染时都这样做.

问题:这似乎是一种react .useMemo不直接支持Typescript的async/await，并将返回一个promise :

//returns a promise: 
let myMemoizedResult = React.useMemo(() => myLongAsyncFunction(args), [args])
//also returns a promise:
let myMemoizedResult = React.useMemo(() => (async () => await myLongAsyncFunction(args)), [args])

等待异步函数的结果并使用React存储结果的正确方法是什么.使用备忘录？我对普通JS使用了常规promise ，但在这种情况下仍然难以实现.

我try 过其他方法，比如memoize one，但问题似乎是this上下文因React函数组件的工作方式而改变，这就是我try 使用React的原因.使用备忘录.

也许我想把一个方形的钉子装进一个圆形的洞里——如果是这样的话，知道这一点也很好.现在，我可能只想推出我自己的记忆功能.

编辑:我想部分原因是我在记忆一中犯了一个不同的愚蠢错误，但我仍然有兴趣知道答案.备忘录

这里有一个片段——我们的 idea 不是直接在render方法中使用记忆结果，而是以事件驱动的方式(即单击"计算"按钮)作为参考.

export const MyComponent: React.FC = () => {
    let [arg, setArg] = React.useState('100');
    let [result, setResult] = React.useState('Not yet calculated');

    //My hang up at the moment is that myExpensiveResultObject is 
    //Promise<T> rather than T
    let myExpensiveResultObject = React.useMemo(
        async () => await SomeLongRunningApi(arg),
        [arg]
    );

    const getResult = () => {
        setResult(myExpensiveResultObject.interestingProperty);
    }

    return (
        <div>
            <p>Get your result:</p>
            <input value={arg} onChange={e => setArg(e.target.value)}></input>
            <button onClick={getResult}>Calculate</button>
            <p>{`Result is ${result}`}</p>
        </div>);
}