Как мне перенаправить на другую страницу формы отправки?

Question

Я пытаюсь перенаправить на определенную страницу после публикации формы, но она не перенаправляет, она только публикует данные формы и не перенаправляет на указанную страницу

Я попытался добавить оператор &&, чтобы onSubmit выполнял обе функции, но безрезультатно. Я также попытался использовать onSubmit и onClick, но работает только onSubmit

//./userspost.js
import React, { Component } from "react";
import { Redirect, Link } from "react-router-dom";
import Form1 from "./form1";
import { createUsers } from "./actions/appactions";

class userspost extends Component {
  state = {
    redirect: false
  };
  setRedirect = () => {
    this.setState({
      redirect: true
    });
  };
  renderRedirect = () => {
    if (this.state.redirect) {
      return <Redirect to="/users" />;
    }
  };
  handleSubmit(data) {
    console.log("form submission data", data);
    createUsers(data);
  }
  render() {
    return (
      <div>
        {this.renderRedirect()}
        <Form1 onSubmit={this.handleSubmit && this.setRedirect} />
      </div>
    );
  }
}

export default userspost;

для размещения данных формы

//./form1.js
import React from "react";
import { Link } from "react-router-dom";
var createReactClass = require("create-react-class");
const Form1 = createReactClass({
  //setting initial state
  getInitialState() {
    return {
      firstName: this.props.firstName,
      lastName: this.props.lastName,
      userName: this.props.userName,
      role: this.props.role
    };
  },
  handleFirstChange(e) {
    this.setState({
      firstName: e.target.value
    });
  },
  handleLastChange(e) {
    this.setState({
      lastName: e.target.value
    });
  },
  handleUserChange(e) {
    this.setState({
      userName: e.target.value
    });
  },
  handleRoleChange(e) {
    this.setState({
      role: e.target.value
    });
  },
  handleSubmit(e) {
    e.preventDefault();
    this.props.onSubmit(this.state);
  },
  render() {
    return (
      <form
        name="categories_post"
        className="form-horizontal"
        onSubmit={this.handleSubmit}
      >
        <div id="categories_post">
          <div className="form-group">
            <label
              className="col-sm-2 control-label required"
              htmlFor="firstName"
            >
              First Name
            </label>
            <div className="col-sm-10">
              <input
                type="text"
                value={this.state.firstName}
                onChange={this.handleFirstChange}
                id="firstName"
                required="required"
                className="form-control"
              />
            </div>
          </div>
          <div className="form-group">
            <label
              className="col-sm-2 control-label required"
              htmlFor="lastName"
            >
              Last Name
            </label>
            <div className="col-sm-10">
              <input
                type="text"
                value={this.state.lastName}
                onChange={this.handleLastChange}
                id="lastName"
                required="required"
                className="form-control"
              />
            </div>
          </div>
          <div className="form-group">
            <label
              className="col-sm-2 control-label required"
              htmlFor="userName"
            >
              UserName
            </label>
            <div className="col-sm-10">
              <input
                type="text"
                value={this.state.userName}
                onChange={this.handleUserChange}
                id="userName"
                required="required"
                className="form-control"
              />
            </div>
          </div>
          <div className="form-group">
            <label className="col-sm-2 control-label required" htmlFor="role">
              Role
            </label>
            <div className="col-sm-10">
              <input
                type="text"
                value={this.state.role}
                onChange={this.handleRoleChange}
                id="role"
                required="required"
                className="form-control"
              />
            </div>
          </div>
          <div className="form-group">
            <div className="col-sm-2" />
            <div className="col-sm-10">
              <button
                type="submit"
                id="categoriesSubmit"
                className="btn-default btn"
              >
                submit
              </button>
            </div>
          </div>
          <div className="form-group">
            <div className="col-sm-2" />
            <div className="col-sm-10">
              <button className="btn btn-danger">
                <Link to="/users">Home</Link>
              </button>
            </div>
          </div>
        </div>
      </form>
    );
  }
});
export default Form1;

для публикации с использованием API извлечения

//./actions/appactions.js 
import fetch from "isomorphic-fetch";

export function createCategories(data) {
  return fetch("https://localhost:44341/api/categories", {
    method: "POST",
    mode: "cors",
    body: JSON.stringify(data),
    headers: {
      "Content-Type": "application/json"
    }
  })
    .then(res => {
      return res;
    })
    .catch(err => err);
}
export function createUsers(data) {
  return fetch("https://localhost:44341/api/users/create", {
    method: "POST",
    mode: "cors",
    body: JSON.stringify(data),
    headers: {
      "Content-Type": "application/json"
    }
  })
    .then(res => {
      return res;
    })
    .catch(err => err);
}
export function createBusiness(data) {
  return fetch("https://localhost:44341/api/businesslistings/create", {
    method: "POST",
    mode: "cors",
    body: JSON.stringify(data),
    headers: {
      "Content-Type": "application/json"
    }
  })
    .then(res => {
      return res;
    })
    .catch(err => console.log(err));
}

Answer 1

Проблема в том, что вы рендерите компонент Redirect вместе с остальной частью вашего JSX каждый раз.Рендеринг только <Redirect to="" /> должен решить вашу проблему.

class userspost extends Component {
  state = {
    redirect: false
  };
  setRedirect = () => {
    this.setState({
      redirect: true
    });
  };
  handleSubmit(data) {
    console.log("form submission data", data);
    createUsers(data);
  }
  render() {

    if( this.state.redirect ){
       return <Redirect to="users/" />
    }

    return (
      <div>
        {this.renderRedirect()}
        <Form1 onSubmit={this.handleSubmit} />
      </div>
    );
  }
}

Кроме того, используйте только функцию handleSubmit в форме события onSubmit.Поскольку добавление двух функций с && может привести к неожиданным результатам.И когда все будет готово к перенаправлению, просто вызовите вашу функцию setRedirect.

Есть кто-то, кто уже ответил на что-то подобное, поэтому я получил небольшую помощь оттуда.Проверьте это:

https://stackoverflow.com/a/43230829/5568741