react-native - 使用 Native Base Toast 显示来自 Redux 操作的错误

Question

我在 React Native 应用程序中使用 NativeBase。我试图根据 redux 操作中设置的错误显示 Toast 组件，因为它是通过调用 API 发生的。

它现在会显示，但目前我收到警告消息:

Warning: Cannot update during an existing state transition (such as within render or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to componentWillMount.

我不确定如何绑定(bind)它或我可以做些什么来解决警告。

渲染方法

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'
      })
    );
  }
}

版本

react 原生:0.55.4

原生基础:2.4.5

编辑:为了清楚起见，添加一个示例

我需要根据服务器的响应显示一个 Toast。例如，如果用户名和密码不匹配帐户，我需要渲染 Toast。

解决方案:

我最终创建了一个 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);

Answer 1

我通过使用 React Hooks 解决了这个问题。

() => {
       useEffect(() => {
           if(error) {
               Toast.show({
                   text: this.props.error.message,
                   buttonText: 'Okay',
                   duration: 5000,
                   type: 'danger'
               })
            }
        })

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