Question

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

现在会显示，但目前我收到警告信息：

警告：在现有状态转换期间无法更新（例如在render或其他组件的构造函数中）。渲染方法应该是道具和状态的纯函数;构造函数副作用是反模式，但可以移动到componentWillMount。

我不确定如何约束这个或我能做些什么来解决警告。

渲染方法

＆＃13;

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

＆＃13;

渲染错误方法

＆＃13;

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

＆＃13;

版本

React Native：0.55.4

Native Base：2.4.5

修改：为了清晰起见添加示例

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

解决方案：

我最终创建了ToastService：

＆＃13;

import { Toast } from 'native-base';

function showToast(message) {
  return (
    Toast.show({
      text: message,
      buttonText: 'Okay',
      duration: 5000,
      type: 'danger'
    })
  );
}

export default {
  showToast
};

＆＃13;

现在在我的行动中我可以打电话：

＆＃13;

ToastService.showToast(data);

＆＃13;

Answer 1

你可以创建一个函数并在外面调用它。但请确保您的应用程序使用native-base的Root组件进行换行。无需像您一样返回组件。调用此函数将显示toastr，现在您可以随时随地调用。但请确保Root组件包装您的应用程序。

从'native-base'导入{Toast};

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

或者在redux行动中

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


  } catch (error) {
    toastr.showToast(error.message)
  }
}

Answer 2

检查React Native Seed以了解此实现 https://reactnativeseed.com/

Answer 3

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

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

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

Answer 4

就像上面的Dwayne所说的那样，您需要使用useEffect，以便在渲染周期之前调用Toast。您可以像这样包装一个组件：

const ErrorToast: React.FC = () => {
    const {state} = useCollections();
    useEffect(() => {
        if(state.errored) {
            Toast.show({
                text: 'Oops. There has been an error',
                duration: 2000
            });
        }
    });

    return null;
}

然后将其作为<ErrorToast />

使用Native Base Toast显示Redux Action的错误

4 个答案: