Реагируйте HO C, чтобы обработать ошибку API дочернего компонента - PullRequest
Новая
       29

Реагируйте HO C, чтобы обработать ошибку API дочернего компонента

0 голосов
/ 21 февраля 2020

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

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

Example- 

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

1 Ответ

1 голос
/ 21 февраля 2020

У вас может быть withFetch HO C для ввода измененной функции извлечения или простой пользовательский хук.

1. HO C Реализация 

// 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. Крюк Custom 

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