小编Jer*_*ner的帖子

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

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

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

警告:无法在现有状态转换期间更新(例如在render组件内部或其他组件的构造函数中)。Render 方法应该是 props 和 state 的纯函数;构造函数的副作用是一种反模式,但可以移至componentWillMount.

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

渲染方法

render() {
  return (
    <View>
      {this.renderError()}
      {this.renderForm()}
    </View>
  );
}
Run Code Online (Sandbox Code Playgroud)

渲染错误方法

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

版本

反应本机:0.55.4

本机基础:2.4.5

编辑:为清楚起见添加示例

我需要根据服务器的响应显示 Toast。例如,如果用户名和密码与帐户不匹配,我需要呈现 Toast。

解决方案:

我最终创建了一个 ToastService:

import { Toast } from 'native-base';

function showToast(message) {
  return (
    Toast.show({ …
Run Code Online (Sandbox Code Playgroud)

toast react-native react-redux native-base

4
推荐指数
1
解决办法
7056
查看次数

标签 统计

native-base ×1

react-native ×1

react-redux ×1

toast ×1