React 本机中的常见按钮组件使用 axios api 调用创建问题

Question

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

有时，按钮不会调用 API 它应该 call.It 调用从另一个页面调用的前一个 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;

在组件（1 和 2）中，我按如下方式使用此按钮

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

Answer 1

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

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 构造函数来创建取消令牌：

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();

Answer 2

创建自定义按钮

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;

并称它为：

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

React 本机中的常见按钮组件使用 axios api 调用创建问题

Common button component in React native creating issue with axios api calls

reactjs

react-native

redux

redux-saga

axios