将 HOC 反应到 handel 子组件 API 失败

Question

我正在使用库中的组件，该组件接受 accessToken 作为道具。像 <AnalyticsChart accesstoken={this.state.token} /> 并基于令牌，它进行 API 调用并根据结果呈现 UI。现在，如果 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
  }
}

将 HOC 反应到 handel 子组件 API 失败

React HOC to handel child component API failure

google-analytics-api

reactjs

react-hoc