Совместное использование изменяемого состояния между несколькими вызовами компонента 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;
}

Это хорошо работает, если параметр обещания никогда не изменяется, но я бы хотел, чтобы он адаптировался в случае новогообещание передается, потому что в этот момент это может привести к состоянию гонки.

1. promise1 передается usePromise
2. promise2 передается usePromis-e
3. promise2 разрешено, значение value2
4. 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;
}