Использовать собственный базовый тост, чтобы показать ошибку от действия Redux - PullRequest
Новая
       80

Использовать собственный базовый тост, чтобы показать ошибку от действия Redux

0 голосов
/ 06 июня 2018

Я использую NativeBase в приложении React Native.Я пытаюсь показать компонент Toast на основе ошибки, которая установлена ​​в действии избыточности, потому что это происходит через вызов API.

Это будет показано сейчас, но в настоящее время я получаю предупреждение:

Предупреждение: невозможно обновить во время существующего перехода состояния (например, в render или в конструкторе другого компонента).Методы рендеринга должны быть чистой функцией реквизита и состояния;побочные эффекты конструктора - это анти-паттерн, но их можно переместить в componentWillMount.

Я не уверен, как я мог связать это или что я мог сделать, чтобы устранить предупреждение.

Метод визуализации 

render() {
  return (
    <View>
      {this.renderError()}
      {this.renderForm()}
    </View>
  );
}

Метод ошибки визуализации 

renderError() {
  if (this.props.error.type === 'server') {
    return (
      Toast.show({
        text: this.props.error.message,
        buttonText: 'Okay',
        duration: 5000,
        type: 'danger'
      })
    );
  }
}

Версии

Реакция Native: 0.55.4

Собственная база: 2.4.5

Редактировать: Добавление примера для наглядности

Мне нужно показать тост на основе ответа от сервера.Например, если имя пользователя и пароль не совпадают с учетной записью, мне нужно отобразить тост.

Решение:

В итоге я создал ToastService: 

import { Toast } from 'native-base';

function showToast(message) {
  return (
    Toast.show({
      text: message,
      buttonText: 'Okay',
      duration: 5000,
      type: 'danger'
    })
  );
}

export default {
  showToast
};

и теперь в своем действии я могу просто позвонить: 

ToastService.showToast(data);

Ответы [ 2 ]

0 голосов
/ 07 июня 2018

Вы можете создать функцию и вызывать ее снаружи.Но убедитесь, что ваше приложение обернуто с корневым компонентом native-base.Нет необходимости возвращать компонент, как вы.Вызов этой функции покажет тостеру, и теперь у вас есть свобода звонить откуда угодно.Но убедитесь, что Root-компонент переносит ваше приложение.

import {Toast} из «native-base»; 

export const toastr = {
  showToast: (message, duration = 2500) => {
    Toast.show({
      text: message,
      duration,
      position: 'bottom',
      textStyle: { textAlign: 'center' },
      buttonText: 'Okay',
    });
  },
};

Теперь внутри вашего действия вы можете вызвать функцию toastr

toastr.showToast('Verication code send to your phone.');

Или в редукционных действиях 

const signup = values => dispatch => {
  try {
    // your logic here


  } catch (error) {
    toastr.showToast(error.message)
  }
}
0 голосов
/ 07 июня 2018

Проверьте React Native Seed для этой реализации https://reactnativeseed.com/

...