我如何从它的包装组件处理 HOC？

Question

我有一个HOC 来使用axios 处理加载，

这是withAxiosHOC的代码：

export default (url, WrapComponent) => {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        data: null,
        isLoading:false,
        isFailed:false,
        isError:false,
        message:null,
      };
    }

    componentDidMount(){
      this.callAPI()
    }
    
    async callAPI(){
      //show loading
      // handle API and pass to wrapped component
      // hide loading
    }

    render() {
      if (this.state.isLoading) {
        return (
          //show loading UI
        )
      } else if(this.state.isFailed){
        return(
          //show Failed UI
        )
      } else if(this.state.isError){
        return(
          //show Error UI
        )
      }

      return (
        <WrapComponent data={this.state.data} {...this.props} />
      )
    }
  }
}

通常我会像这样使用HOC，比如说Home.js：

export default withAxiosHttp(
  'https://reactnative.dev/movies.json',
  class Home extends React.Component{
    constructor(props) {
      super(props);
      this.state = {
        data:props.data
      }
    }
  
    render() {
      return(
        <View style={{flex:1, backgroundColor:Color.black}}>
          <MyText>{JSON.stringify(this.state.data, null, 2)}</MyText>
        </View>
      )
    }
  }
)

但有时我需要根据包装组件的状态调用 URL，

类似Suggestion.js:

export default withAxiosHttp(
  'https://exampleAPIneedDynamicValue.com/suggestion?lat='+this.state.position.lat+'&long='+this.state.position.long,
  class Suggestion extends React.Component{
    constructor(props) {
      super(props);
      this.state = {
        data:props.data,
        position:{lat:null, long:null}
      }
    }

    componentDidMount(){
      let tempPosition = this.state.position
      tempPosition.lat = MyLatitude
      tempPosition.long = MyLongitude
      this.setState({position:tempPosition})
    }
  
    render() {
      return(
        <View style={{flex:1, backgroundColor:Color.black}}>
          <MyText>{JSON.stringify(this.state.data, null, 2)}</MyText>
        </View>
      )
    }
  }
)

正如您在Suggestion.js 中看到的，我需要根据position state 的lat 和long 调用一个URL， 而lat long state 仅适用于wrappedComponent 的HOC，

我的问题：

1. 当 lat long 状态在 WrappedComponent 中可用时，我如何处理 HOC 以运行？
2. 我的 HOC 也可以用于POST method 吗？

请在React Native范围内给我一个建议/答案

Answer 1

可以修改url参数是函数而不是字符串。

在withAxiosHOC

async callAPI(){
   axios.get(url(this.state)).then(data => {
       //logic here
   })
}

您的Suggestion.js 将是

export default withAxiosHttp(
  (state) => {
      return 'https://exampleAPIneedDynamicValue.com/suggestion?lat='+state.position.lat+'&long='+state.position.long
  },
  class Suggestion extends React.Component{
    constructor(props) {
      super(props);
      this.state = {
        data:props.data,
        position:{lat:null, long:null}
      }
    }

    componentDidMount(){
      let tempPosition = this.state.position
      tempPosition.lat = MyLatitude
      tempPosition.long = MyLongitude
      this.setState({position:tempPosition})
    }
  
    render() {
      return(
        <View style={{flex:1, backgroundColor:Color.black}}>
          <MyText>{JSON.stringify(this.state.data, null, 2)}</MyText>
        </View>
      )
    }
  }
)