Reactjs axios api调用中React native创建问题中的公共按钮组件

我制作了一个常用的按钮组件，我在两个不同的页面中使用它。 点击按钮，它会根据道具调用不同的API

有时，按钮不调用它应该调用的API，而是调用从另一个页面调用的上一个API

我检查并找到了一个解决方案，异步axios请求需要取消订阅，但我不确定在哪里取消订阅API调用以及如何取消订阅

我正在使用redux saga进行Api调用

下面是我的代码：

import React from 'react';
import {Button, Image, Icon} from 'react-native-elements';


const Button = props => {
  handlePress = () => {
    props.onPress();
  };

  return (
    <>
        <Button
          title={props.title}
          onPress={() => this.handlePress()}
          icon={
            <Image
              source={require('../assets/images/abc.png')}
              style={{marginLeft: ResponsiveWidth(-41)}}
            />
          }></Button>
    </>
  );
};

export default Button;

从“React”导入React；
从“react native elements”导入{按钮、图像、图标}；
常量按钮=道具=>{
手按=（）=>{
props.onPress（）；
};
返回(
this.handlePress（）}
图标={
}>
);
};
导出默认按钮；

在组件（1和2）中，我使用以下按钮

<Button onPress={this.handleSubmit}    //Handle submit dispatches different action from component 1 and component 2

---

您可以使用取消令牌取消请求

1） 您可以使用CancelToken.source工厂创建取消令牌，如下所示：

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // handle error
  }
});

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

source.cancel('Operation canceled by the user.');

2） 还可以通过将执行器函数传递给CancelToken构造函数来创建cancel令牌：

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // An executor function receives a cancel function as a parameter
    cancel = c;
  })
});

// cancel the request

cancel();

您可以使用取消令牌取消请求

1） 您可以使用CancelToken.source工厂创建取消令牌，如下所示：

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // handle error
  }
});

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

source.cancel('Operation canceled by the user.');

2） 还可以通过将执行器函数传递给CancelToken构造函数来创建cancel令牌：

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // An executor function receives a cancel function as a parameter
    cancel = c;
  })
});

// cancel the request

cancel();

创建自定义按钮

const MyButton = ({title,onPress}) => {
  return (
       <Button
          title={title}
          onPress={onPress}
          icon={
            <Image
              source={require('../assets/images/abc.png')}
              style={{marginLeft: ResponsiveWidth(-41)}}
            />
          }>
        </Button>
  );
};

export default MyButton;

constmybutton=（{title，onPress}）=>{
返回(
);
};
导出默认MyButton；

并称之为：

<MyButton title={'Title'} onPress={()=> doJob()} />

doJob（）}/>
创建自定义按钮

const MyButton = ({title,onPress}) => {
  return (
       <Button
          title={title}
          onPress={onPress}
          icon={
            <Image
              source={require('../assets/images/abc.png')}
              style={{marginLeft: ResponsiveWidth(-41)}}
            />
          }>
        </Button>
  );
};

export default MyButton;

constmybutton=（{title，onPress}）=>{
返回(
);
};
导出默认MyButton；

并称之为：

<MyButton title={'Title'} onPress={()=> doJob()} />

doJob（）}/>
您面临的问题是什么？有任何错误吗？如果
this.handleSubmit
不是箭头函数，则您可以面对此类问题，或者在构造函数
this.handleSubmit=this.handleSubmit.bind（this）中没有这样绑定
您面临的问题是什么？有错误吗？如果
this.handleSubmit
不是箭头函数，您可以面对这样的问题，或者在构造函数
this.handleSubmit=this.handleSubmit.bind（this）中没有这样绑定