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的情况，因为在这一点上，它可能会导致竞争状态。

promise1传递给usePromise
promise2传递给usePromis-e
promise2已解决，将值设置为value2
promise1已解决，将值设置为value1

在这一系列事件中，新承诺的价值被旧承诺的价值覆盖，该旧承诺随后得到解决。

但是，由于承诺不可取消，因此我看不到一种方法来检查承诺的回调，是否在等待解决新承诺时传递了新的承诺。

有什么办法可以做到这一点？

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;
}

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

1 个答案: