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中看到的那样，我需要根据lat的{{1}}和long调用URL，和position state仅在lat long state的{{1}}中可用，

我的问题：

当wrappedComponent中的wrappedComponent状态可用时，如何处理HOC来运行？
我的HOC是否也可以用于HOC？

请给我一个在lat long范围内的建议/答案

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

如何处理包装好的HOC？

1 个答案: