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

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。不必在自己的方法中使用此方法，但是如果您愿意这样做，则只需从handleRedirect()调用handleChange。

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())
  }