Javascript 使用挂钩在React组件的多个调用之间共享可变状态

我想用promise创建一个

，它的工作原理如下：

从“react”导入{useState，withEffect}；
函数usePromise（promise，默认值=null）{
//这个状态变量将保持我们承诺的价值。
//我们允许用户传入一个将被返回的默认值
//只要承诺还没有解决。
let值，setValue=useState（默认值）；
//确保只有在承诺更改时才重新运行此操作。
withEffect（（）=>{
承诺。然后（设置值）
}[承诺]）
返回值；
}

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

promise1
传递给
useconomise
promise2
被传递给
usePromis-e
promise2
已解析，将值设置为
value2
promise1
已解析，将值设置为
value1
在这一系列事件中，新承诺的价值将被旧承诺的价值覆盖，而旧承诺的价值将在稍后解析

但是，由于承诺是不可撤销的，我看不到一种方法来检查一个承诺的回调，在它等待解决时，是否有新的承诺被传递进来

有什么方法可以做到这一点吗？
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;
}

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

实际上，根据承诺的内容，它可能会被取消。例如，如果您正在发出提取请求，则可以取消该请求。有关详细信息，请参阅。实际上，根据承诺的作用，它可能会被取消。例如，如果您正在发出提取请求，则可以取消该请求。有关详细信息，请参阅。