Реагировать на HOC для обработки сбоя API дочернего компонента

Question

Я использую компонент из библиотеки, которая принимает accessTokenкак реквизит. подобно <AnalyticsChart accesstoken={this.state.token} />и на основе токена он выполняет вызов API и отображает пользовательский интерфейс на основе результата. Теперь, еслиaccesstoken истек, у него нет реквизита обратного вызова для уведомления родительского компонента (над которым я полностью контролирую).

Итак, есть ли способ создать компонент более высокого порядка, который мог бы прослушивать запросы API, сделанные дочерними компонентами, или просто наблюдать за изменениями DOM, чтобы увидеть, не отображается ли ничего в течение длительного времени?

Пример-

export default MyComponent extends Component{
    render(){
        <AnalyticsComponent accesstoken={this.props.token} />
    }
}

Answer 1

Вы можете иметь withFetch HOC, чтобы внедрить вашу модифицированную функцию выборки или простой пользовательский хук.

1. Внедрение HOC

// UNTESTED
function withFetch(Component) {
  return function(props) {
    const [error, setError] = React.useState(false);

    // modified fetch
    const doFetch = React.useCallback((url, options) => {
      try {
        fetch(url, options)
        // proceed if successful
      } catch(error) {
        setError(true);
        // TODO: add other states to store error message
      }
    }, [params])

    // run effect every time there's fetch error
    React.useEffect(() => {
      if (error) {
        // TODO: do something
      }
    }, [error]);

    return <Component fetch={doFetch} {...props} />
  }
}

const EnhancedComponent = withFetch(MyComponent)
return <EnhancedComponent accessToken="some token" />

2. Пользовательский крючок

function hasFetchError(url, options) {
  const [error, setError] = React.useState(false);

  React.useEffect(() => {
    async function doFetch() {
      try {
        await fetch(url, options)
        // do something with response
      } catch(error) {
        setError(true);
      }
    }
    doFetch();
  }, [url, options])

  return error;
}

// Usage:
function MyComponent(props) {
  const error = hasFetchError(props.url, props.options);
  if (error) {
    // do something
  }
}