使用钩子在 React 组件的多次调用之间共享可变状态

Question

我想创建一个withPromise，其工作方式如下：

import {useState, withEffect} from "react";

function usePromise(promise, default=null) {
    // This state variable will hold the value of our promise.
    // We allow the user to pass in a default value that'l be returned
    // as long as the promise hasn't been resolved.
    let value, setValue = useState(default);

    // Ensure that this is only re-run when the promise changes.
    withEffect(() => {
        promise.then(setValue)
    }, [promise])

    return value;
}

如果promise 参数从不改变，这很有效，但我希望它能够适应传入新的promise，因为此时可能会导致竞争条件。

1. promise1 传递给 usePromise
2. promise2 传递给 usePromis-e
3. promise2 已解析，将值设置为 value2
4. promise1 已解析，将值设置为 value1

在这一系列事件中，新 Promise 的值被旧 Promise 的值覆盖，后者稍后解决。

但是由于承诺是不可取消的，我看不到有一种方法可以在承诺的回调中检查新的承诺在等待解决时是否已传入。

有什么办法可以做到吗？

Answer 1

useEffect 可以返回一个用于拆卸逻辑的函数。虽然您无法取消承诺，但您可以设置一个标志，然后检查该承诺何时解决以中止回调。例如，如下所示：

function usePromise(promise, default=null) {
  let [value, setValue] = useState(default);

  useEffect(() => {
    let cancelled = false;
    promise.then((result) => {
      if (!cancelled) {
        setValue(result);
      }
    })
    return () => cancelled = true;
  }, [promise])

  return value;
}