为什么我不能通过React中ref存储的resolve函数解析promise?

我试图创建一个promisify风格的钩子,这个想法是最终将其与Redux Toolkit一起使用,以允许使用新的React 19 use 钩子。

以下是这件事的工作原理:

function usePromise(input: {
    isLoading: true,
    data: null
} | {
    isLoading: false,
    data: string;
}) {


    // Store the resolve function in a ref 
    const resRef = useRef<(data: string) => void>(null);

    // Create a new promise 
    // Store the resolve function in the ref 
    const promiseRef = useRef(
        new Promise((res) => {
            resRef.current = res;

            //res("xxx") // 👈 this will resolve though
        })
    );

    // When input changes, if there is data, resolve the promise
    useEffect(() => {
        if (!input.isLoading) {
            resRef.current?.(input.data);
        }

    }, [input]);

    // Return the promise 
    return promiseRef.current;
}

用法如下:

export function MyComponent() {

    const [value, setValue] = useState<null | string>(null);

    const prom = usePromise(value ? {
        isLoading: false,
        data: value
    } : {
        isLoading: true,
        data: null
    });

    prom.then((v) => alert(v))

    return <div >

        <button onClick={() => setValue("123")}>Click me</button>
    </div>
}

在这里,我希望当我们点击按钮时,promise会解决,我们会看到警报。然而,事实并非如此。

这是怎么回事?

我在这里复制了这个问题: https://github.com/dwjohnston/react-promise-issue