时间戳

首页 > 解决方案 > 使用重定向时，我的状态不会更新，所以我从不重定向

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

问题描述

背景

我有一个带有表单的 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)

非常感谢您的宝贵时间！

标签： javascriptreactjsreduxreact-router

解决方案

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

推荐阅读