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

Question

背景

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

在研究这个问题时，我尝试了 this和 this和 this ，加上 github 上的其他解决方案，但没有一个完全有效。大多数解决方案处理状态更改，有些与路由器一起使用。我不确定我错过了什么。

代码

这是我的表格。

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() 即可。