小编Dou*_*ton的帖子

场景相对简单：我们在远程服务器上进行了长时间运行的按需计算。我们想记住结果。即使我们从远程资源异步获取，这也不是副作用，因为我们只是希望将此计算的结果显示给用户，我们绝对不想在每次渲染时都这样做。

问题：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.useMemo 记住结果的正确方法是什么？我已经使用普通 JS 的常规承诺，但在这些类型的情况下仍然与它们斗争。

我尝试过其他方法，例如 memoize-one，但问题似乎是this由于 React 函数组件的工作方式导致上下文发生了变化，从而破坏了 memoization，这就是我尝试使用 React.useMemo 的原因。

也许我正在尝试在此处的圆孔中安装一个方钉-如果是这种情况，也最好知道这一点。现在我可能只是要推出我自己的记忆功能。

编辑：我认为部分原因是我在 memoize-one 上犯了一个不同的愚蠢错误，但我仍然有兴趣知道这里的答案是 React.memo。

这是一个片段 - 这个想法不是直接在渲染方法中使用记忆化的结果，而是作为以事件驱动的方式引用的东西，即在计算按钮单击上。

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

    //My hang up …