0

我有一个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，我需要根据latand调用 URL ，并且仅在longof中可用，position statelat long statewrappedComponentHOC

我的问题：

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

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

4

1 回答 1

0

你可以修改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>
      )
    }
  }
)
于 2020-06-30T11:44:16.753 回答