React - 完成表单提交后重定向

Question

I'm new to React , sorry if this is too basic.

I'm trying to perform a redirect to a page when a form is submitted. For that I'm using this.redirect.state , since state changes re-renders the component.

Then I set state update as condition inside render() for redirection.

However, I'm being redirected as soon as I enter one single character at form -any change, and this is undesired.

How do I redirect after complete form submission?

Here's my code:

class Seeds extends Component{
  constructor (props) {
    super(props);
    this.state = { 
        formSeeds: {
          arabica:'',
          hybrid:'',
          robusta:'',
          my_bean:'',
        },
        redirect: false
    };

handleSubmitMyBean(event) {
    event.preventDefault();
    //const formType = this.props.formType
    const {userId} = this.props
    var headers = {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${window.localStorage.authToken}`
        }
    const data = {
      my_bean: this.state.formSeeds.my_bean
    };

    const url = `${process.env.REACT_APP_WEB_SERVICE_URL}/handle_seeds/${userId}`;

    axios.post(url, data, headers)
      .then((res) => {
        //this.clearSeedsForm()
        console.log(data);
      })
      .catch((error) => { console.log(error); 
    });
  };

  handleSeedFormChange(event) {
    console.log(event)
    const obj = Object.assign({}, this.state.formSeeds);
    obj[event.target.name] = event.target.value;
    this.setState({ formSeeds: obj });
    this.validateForm();
  };

render(){
      <div>
      if(this.state.formSeeds.my_bean){
        return (<Redirect to='/edit-coffee' />);
      }

      <form onSubmit={ (event) => this.handleSubmitMyBean(event) }>
                <div className="field">
                 <input
                  name="my_bean"
                  className="input is-dark is-large"
                  type="text"
                  placeholder="Enter Bean"
                  value={this.state.formSeeds.my_bean}
                  onChange={this.handleMyBeanFormChange}
                  />
                </div>
                <input
                  type="submit"
                  className="button is-dark is-small is-fullwidth"
                  value="Seed Bean"
                  //disabled={!this.state.valid}  
                />
            </form>
           </div>
        )
       }

Answer 1

Your redirect depends on this.state.formSeeds.my_bean which you update on change.

Change your post callback to update the redirect state:

axios.post(url, data, headers)
  .then((res) => {
    console.log(data);
    this.setState({ redirect: true }); // <---
  })
  .catch((error) => {
    console.log(error); 
  });

And update your render method so it redirects on the right state change:

render() {
  if(this.state.redirect) {
    return (<Redirect to='edit-cofee' />);
  } else {
    return (
      <div> ... </div>
    );
  }
}