ReactJS-无法为回调函数返回jsx?

我已经和react合作了一段时间,但我遇到了一个非常基本的问题,但我不明白为什么它不起作用。 基本上,在登录组件中,我提交一个表单,当它返回错误时,呈现一条snackbar消息。

  handleSubmit = (event) => {
    event.preventDefault()
  //api call here
    onFormSubmit(this.state)
     .then(() => history.push('/teams'))
     .catch(e => <Snackbar message={e}/>)
  }

  render() {

使现代化

我能想到这样做的唯一方法:

this.state = {
  email: '',
  password: '',
  error: ''
}
handleSubmit = (event) => {
event.preventDefault()
//api call here
onFormSubmit(this.state)
 .then(() => history.push('/teams'))
 .catch(e => this.setState({error: e})
}
render () {
 return (
   <div>
      {this.state.error && <Snackbar message={this.state.error}/>}....

但我不想同时向服务器提交错误字段。是否有其他方法将其注入组件?