Javascript ReactJS-无法为回调函数返回jsx？

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

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

  render() {

handleSubmit=（事件）=>{
event.preventDefault（）
//这里的api调用
onFormSubmit（this.state）
.然后（（）=>history.push（'/teams'））
.catch（e=>）
}
render（）{

控制台没有显示任何错误，但在onFormSubmit调用失败时，我看不到任何snackbar

更新

我现在明白了，我没有在render（）{return（。。。。 我能想到这样做的唯一方法：

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}/>}....

this.state={
电子邮件：“”，
密码：“”，
错误：“”
}
handleSubmit=（事件）=>{
event.preventDefault（）
//这里的api调用
onFormSubmit（this.state）
.然后（（）=>history.push（'/teams'））
.catch（e=>this.setState（{error:e}）
}
渲染（）{
返回(
{this.state.error&&}。。。。

---

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

您需要将该组件放入渲染的JSX中，或者以某种方式注入。是否在渲染的返回中调用

handleSubmit

一个选项是在catch内部使用JQuery将Snackbar注入页面

---

更好的选择是在渲染返回中以某种方式触发该组件，就像正常情况一样。例如，在catch内部将localState变量

error

设置为true，然后根据

this.state.error

为true在渲染内部有条件地渲染snackbar。

如果解决方案正确，则可以lso将

handleSubmit

委托给父组件，如果出现错误，则显示

Snackbar

组件，否则显示

表单

组件

在您的示例中，如果不想发布错误，可以对

状态

对象进行分解，以控制要发送的属性

handleSubmit = (event) => {
  const {email, password} = this.state;
  event.preventDefault()
  //api call here

  onFormSubmit({email, password})
    .then(() => history.push('/teams'))
    .catch(e => this.setState({error: e})
}

---

承诺的结果似乎不会在任何地方使用。如果出现

catch

，它只是一个孤立的表达式，不会在任何地方使用。？如果发生catch，当我编写catch（e=>console.log（e））时。我可以在控制台中阅读错误消息。我可以做什么来呈现消息？单击“提交”按钮时我会调用handleSubmit。我用你的想法更新了我的帖子。我只是想知道，有没有更干净的方法来完成这件事。我不相信有任何方法可以将该组件仅在非呈现函数中注入当前页面，而不使用任何其他方法我喜欢JQuery。如果这个答案是你问题的解决方案，我很想得到你的投票！从这里开始，能得到一些声誉积分会很好。如果你能得到那些选择的答案的话！