React useMemo不缓存结果

Question

我在Typescript中有一个简单的React应用，我正在尝试利用useMemo()，但无法正常工作。

useMemo，如果我理解正确，如果输入参数等于已经计算出的参数，则不应调用昂贵的操作。

const memoizedResult = useMemo(() => multiply(data), [data]);

但是在我看来，总是调用昂贵的操作，并且不会从缓存中检索结果。

输入值是相同的444，结果是相同的888。操作被称为20次。应该是1。

在控制台中检查结果：

演示：

import React, { FC, useMemo } from "react";

function App() {
    return <table><tbody>
        {[...Array(20).keys()].map(it => {
            return <CachedRow key={it} data={444}></CachedRow>
        })}
    </tbody></table>
}

export default App;

const CachedRow: FC<{ data: number; }> = ({ data = 1 }) => {
    const memoizedResult = useMemo(() => multiply(data), [data]);
    return (<tr>
        <td>{new Date().toLocaleTimeString()}</td>
        <td>-</td>
        <td>{memoizedResult}</td>
    </tr>);
};

function multiply(a: number): string {
    console.log('expensive multiply', a);
    return (a * 2).toString();
}