web-dev-qa-db-fra.com

Rediriger avec React Composants fonctionnels

J'ai besoin d'aide, je suis en train de coder ce formulaire et après l'avoir soumis, l'état des modifications "publiées" de faux à vrai et je m'attendrais à "renvoyer la redirection vers ="/landing ";" pour me rediriger vers la page de destination, cependant, ce n'est pas le cas, car je suppose que la ligne ne se réexécute pas après le rendu initial. J'espérais que changer l'état de "posté" provoquerait un nouveau rendu. J'ai entendu parler de l'utilisation de l'historique Push et j'ai essayé de l'adapter à mon code, mais j'ai échoué. Je ne sais pas comment envelopper mon composant avec "withRouter" étant donné que je l'ai déjà encapsulé avec "connect". Comment puis-je atteindre cet objectif? J'ai lu de nombreux articles à ce sujet mais je ne sais pas comment l'adapter à mon code. Toute aide est appréciée.

import React, { useState } from "react";
import Navbar from "./Navbar";
import { connect, useDispatch } from "react-redux";
import { Redirect } from "react-router-dom";
import { createProject } from "../actions/projectAction";
import PropTypes from "prop-types";
import { Push } from "connected-react-router";

const EditProject = ({ posted, createProject }) => {
  const dispatch = useDispatch();
  const [formData, setFormData] = useState({
    projectTitle: "",
    projectDescription: "",
    deliveryDate: ""
  });

  const { projectTitle, projectDescription, deliveryDate } = formData;

  const onChange = e => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const onSubmit = async e => {
    e.preventDefault();
    createProject({ projectTitle, projectDescription, deliveryDate });
    dispatch(Push("/login"));
  };

  if (posted) {
    return <Redirect to="/landing" />;
  }

  return (
    <div>
      <Navbar />
      <div className="container">
        <form onSubmit={e => onSubmit(e)}>
          <h4>Project Title</h4>
          <input
            name="projectTitle"
            value={projectTitle}
            className="form-control"
            placeholder="Your project title"
            onChange={e => onChange(e)}
          />
          <h4>Delivery Date</h4>
          <input
            type="date"
            className="form-control"
            name="deliveryDate"
            value={deliveryDate}
            onChange={e => onChange(e)}
          />
          <h4>Description</h4>
          <textarea
            name="projectDescription"
            value={projectDescription}
            className="form-control"
            rows="10"
            onChange={e => onChange(e)}
          ></textarea>
          <input type="submit" className="btn btn-primary" value="Create" />
          <a href="/projects" className="btn btn-danger">
            Cancel
          </a>
        </form>
      </div>
    </div>
  );
};

EditProject.propTypes = {
  createProject: PropTypes.func.isRequired
};

const mapStateToProps = state => ({
  posted: state.posted
});

export default connect(mapStateToProps, { createProject })(EditProject);
javascriptreactjsformsreact-reduxreact-router
2
K. Green

Je pense que vous devez définir votre itinéraire. De mon code suivant, vous pouvez avoir une petite idée du routage.

Dans App.js en gros j'ai défini les routes et j'ai créé deux autres composants fonctionnels Landing et EditProject pour simuler votre idée. De plus, j'ai utilisé Link à des fins de navigation

App.js

import React, { Component } from "react";
import { BrowserRouter, Route, Switch, Link } from "react-router-dom";
import EditProject from "./editProject";
import Landing from "./landing";

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div id="container">
          <div>
            <Link to="/">Landing Page</Link>
            <Link to="/editproject">Edit Project</Link>
          </div>
          <Switch>
            <Route path="/editproject" component={EditProject} />
            <Route exact path="/" component={Landing} />
          </Switch>
        </div>
      </BrowserRouter>
    );
  }
}

export default App;

Landing composant fonctionnel

import React from "react";

const Landing = () => {
  return <h1>Landing Page</h1>;
};

export default Landing;

EditProject composant fonctionnel

import React from "react";

const EditProject = props => {
  function handleSubmit(e) {
    e.preventDefault();
    console.log("submitted");
    //do your task here before redirect
    //...
    props.history.Push("/");
  }

  return (
    <div>
      <h1>Edit Project</h1>
      <form onSubmit={handleSubmit}>
        <button>Submit</button>
      </form>
    </div>
  );
};

export default EditProject;

J'espère que cela vous aidera.

2
tareq aziz

Il y a deux choses que je voudrais aborder dans votre code.

si le composant EditProject va directement à Route, vous avez accès à Push.

const EditProject = ({ { posted, createProject, history: { Push } }) => {
    Push() // your access to Push
}

deuxièmement, dans votre connexion, je ne soutiens pas cette idée de votre connexion. Probablement, la fonction de soumission n'était pas en cours d'exécution.

Vous pouvez faire quelque chose comme ci-dessous pour faire une différence.

export default connect(mapStateToProps, { handleNewProject, createProject })(EditProject);

Maintenant, réécrire le composant EditProject serait

import React, { useState, useEffect } from "react";

const EditProject = ({ { posted, handleNewProject, history: { Push } }) => {
    Push() // your access to Push
    // useEffect React component life cycle Hook
    useEffect(() => () => Push('/landing'), [posted]);

}

Remarquez que j'utilise React Hook tout comme vous utiliseriez React class componentcercle de vie .

0
akolliy