javascript - 从钩子(Hook)返回值(value) promise

Question

所以我想成为一个聪明的 a$$ 并从钩子(Hook)返回一个 promise (这样我就可以等待值，而不是等待钩子(Hook)在其解析后给我值并重新运行)。我正在尝试这样的事情，并且一切正常，直到解决部分。 .then 似乎从未运行过，这告诉我我设置的解析没有正确触发。这是代码:

function App() {
  const { valPromise } = useSomeHook();
  const [state, setState] = React.useState();
  
  React.useEffect(() => {
    valPromise.then(r => {
        setState(r);
    });
  }, []);
  
  if (!state) return 'not resolved yet';
  return 'resolved: ' + state;
}

function useSomeHook() {
  const [state, setState] = React.useState();
  const resolve = React.useRef();
  const valPromise = React.useRef(new Promise((res) => {
    resolve.current = res;
  }));
  
  React.useEffect(() => {
    getValTimeout({ setState });
  }, []);
  
  React.useEffect(() => {
    if (!state) return;
    resolve.current(state);
  }, [state]);
  
  return { valPromise: valPromise.current, state };
}

function getValTimeout({ setState }) {
  setTimeout(() => {
    setState('the val');
  }, 1000);
}

和一个可用的 jsfiddle:https://jsfiddle.net/8a4oxse5/

我用普通函数尝试了类似的东西(重新分配 promise 构造函数的“解决”部分)，它似乎有效:

let resolve;

function initPromise() {
  return new Promise((res) => {
    resolve = res;
  });
}

function actionWithTimeout() {
  setTimeout(() => {
    resolve('the val');
  }, 2000);
}

const promise = initPromise();
actionWithTimeout();
promise.then(console.log);

jsfiddle:https://jsfiddle.net/pa1xL025/

这让我觉得 useRef 或渲染发生了某些事情。

** 更新**

所以看起来 useRefs 工作正常。它对“res”(或解决)的最终调用似乎没有履行 promise ( promise 保持未决状态)。不确定引用(从钩子(Hook)返回的引用)是否在渲染之间中断或其他什么

Answer 1

如果你使用这段代码，问题就消失了:

const valPromise = React.useRef();
if (!valPromise.current) {
    valPromise.current = new Promise((res) => {
        resolve.current = res;
    })
}

通常你不应该在渲染期间写入 ref 但这种情况是 ok .

解释

当你最初有这个时:

const valPromise = React.useRef(new Promise((res) => {
    resolve.current = res;
}));

这里的 promise 实际上是在每次渲染时重新创建的，并且只使用第一次渲染的结果。

来自docs :

const playerRef = useRef(new VideoPlayer());

Although the result of new VideoPlayer() is only used for the initialrender, you’re still calling this function on every render. This canbe wasteful if it’s creating expensive objects.

因此在您的情况下，这意味着 resolve.current 将在每次渲染时更新。但是 valPromise 仍然是初始的。

---

此外，由于传递给 useRef 的表达式在渲染过程中运行，所以不应该在那里做任何你在渲染过程中不会做的事情，包括副作用 - 写入 resolve.current 是。