0

我正在使用一个库中的组件，它接受一个accessToken作为道具。与令牌类似 <AnalyticsChart accesstoken={this.state.token} />并基于令牌，它会进行 API 调用并根据结果呈现 UI。现在，如果accesstoken已经过期，它没有回调道具来通知父组件（我可以完全控制它）。

那么，有没有办法构建一个高阶组件，它可以监听子组件发出的 API 请求，或者只是观察 DOM 更改以查看是否长时间没有呈现任何内容？

例子-

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

1 回答 1

2

你可以有一个withFetchHOC 来注入你修改后的 fetch 函数或一个简单的自定义钩子。

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
  }
}
于 2020-02-21T04:43:58.883 回答