使用重定向时，我的状态不会更新，所以我从不重定向

Question

背景

我有一个带有表单的 react/redux 项目。提交表单后，我希望它重定向到我网站上的另一个页面。

在这里研究这个问题时，我尝试了this 和this 和this，以及 github 上的其他解决方案，但都没有奏效。大多数解决方案处理状态变化，一些与Router 一起使用。我不确定我错过了什么。

代码

这是我的表格。

import React from 'react'
import {connect} from 'react-redux'
import {addProgram} from '../../actions/addProgram'
import {Form} from 'semantic-ui-react'
import {Redirect} from 'react-router'

class ProgramInput extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      name: '',
      network: '',
      image: '',
      fireRedirect: false
    }
    this.handleSubmit = this.handleSubmit.bind(this)
  }

  handleChange = event => {
    this.setState({
      [event.target.name]: event.target.value
    })
  }

  handleRedirect = event => {
    this.setState({
      fireRedirect: true
    })
  }

  handleSubmit = event => {
    event.preventDefault()

    this.props.addProgram(this.state)


    this.setState({
      name: '',
      network: '',
      image: '',
      fireRedirect: ''
    })
  }

  render(){
    const fireRedirect = this.state.fireRedirect

        if (fireRedirect === true) {
          return <Redirect to='/programs' /> }

    return(
            <Form onSubmit={this.handleSubmit}>
              <h2>Create a New Show</h2>
                <Form.Input
                  fluid
                  label='Name'
                  name='name'
                  value={this.state.name}
                  onChange={this.handleChange}
                  width={6} />
                <Form.Input
                  fluid
                  name='network'
                  label='Network'
                  value={this.state.network}
                  onChange={this.handleChange}
                  width={6} />
                <Form.Input
                  fluid
                  name='image'
                  label='Image Link'
                  value={this.state.image}
                  onChange={this.handleChange}
                  width={8} />
                <Form.Button>Submit</Form.Button>
            </Form>
    )
  }
}

export default connect(null, {addProgram})(ProgramInput)

非常感谢您的宝贵时间！

Answer 1

您当前代码失败的原因是因为从未调用过handleRedirect。没有必要在它自己的方法中使用它，但如果这是你喜欢的，那么只需从 handleChange 调用 handleRedirect()。

Answer 2

您永远不会调用 handleRedirect 函数来更新 fireRedirect 状态。尝试修改您的 handleSubmit 函数，并在 setState 回调中使用 fireRedirect。这将呈现提交并清除表单后重定向到"/programs" 的视觉效果。

  handleSubmit = event => {
    event.preventDefault()

    this.props.addProgram(this.state)


    this.setState({
      name: '',
      network: '',
      image: '',
      fireRedirect: ''
    }, () => this.handleRedirect())
  }