时间戳

首页 > 解决方案 > 使用钩子在 React 组件的多次调用之间共享可变状态

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

问题描述

我想创建一个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 的值覆盖，旧 Promise 的值稍后解决。

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

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

标签： javascriptreactjspromisereact-hooks

解决方案

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

推荐阅读