Обычный компонент кнопки в React для создания собственной проблемы с вызовами API ax ios - PullRequest
Новая
       14

Обычный компонент кнопки в React для создания собственной проблемы с вызовами API ax ios

0 голосов
/ 17 января 2020

Я сделал общий компонент кнопки, который я использую на двух разных страницах. При нажатии кнопки вызывается другой API в зависимости от реквизита.

Иногда кнопка не вызывает API, который должен вызываться. Она вызывает предыдущий API, который был вызван с другой страницы.

Я проверил и пришел к решению, что запрос на асинхронный топор ios необходимо отписать, но я не уверен, где отменить подписку на вызов API и как.

Я использую избыточную сагу для вызовов 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

Ответы [ 2 ]

2 голосов
/ 17 января 2020

Создайте свою пользовательскую кнопку 

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()} />
0 голосов
/ 17 января 2020

Вы можете отменить запрос, используя токен отмены.

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