0
171
Views¿Es esta la forma correcta de llamar a una función y `<Link to ='/orderCP/orderCompletedCP' /> ` para cambiar la ruta
cuando envío el formulario, no irá a la siguiente ruta y no estoy seguro de si esta es la forma correcta de llamar a la función loadUser que escribí en el archivo app.js y la llamo aquí
function OrderCP(props) { const [firstName, setFirstName] = useState(''); const [lastName, setLastName] = useState(''); const [email, setEmail] = useState(''); const [mobileNumber, setMobileNumber] = useState(''); const [adress, setAddress] = useState(''); const [city, setCity] = useState(''); const [size, setSize] = useState(''); const [quantity, setQuantity] = useState('1'); function onOrderSubmit () { fetch('http://localhost:3000/orderCP', { method: 'post', mode: 'cors', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ firstname: firstName, lastname:lastName, email: email, mobilenumber: mobileNumber, adress: adress, city: city, size:size, quantity: quantity }) }) .then(response => response.json()) .then(user => { if (user.id) { return ( this.props.loadUser(user), <Link to ='/orderCP/orderCompletedCP' /> ) } }) }
·
Juan Pablo Isaza
1 answers
Answer question0
Problemas
- Este es un componente de función, por lo
thissimplemente no está definido, solo haga referencia directamente al argumentoprop. - El
Linkes un componente de React, debe renderizarse en el DOM e interactuar con él. Debe emitir una navegación imperativa ( vs declarativa con componentes representados ).
Solución
Si usa el react-router-dom actual, versión 6, use el gancho useNavigate para acceder a una función de navigate ; de lo contrario, si todavía está en la versión 5, use el gancho useHistory para acceder a un objeto de history .
import { ... useHistory, // RRDv5 useNavigate, // RRDv6 ... } from 'react-router-dom'; ... function OrderCP(props) { const history = useHistory(); // RRDv5 const navigate = useNavigate(); // RRDv6 ... state declarations ... function onOrderSubmit() { fetch('http://localhost:3000/orderCP', { method: 'post', ... }) .then(response => response.json()) .then(user => { if (user.id) { props.loadUser(user); history.push('/orderCP/orderCompletedCP'); // RRDv5 navigate('/orderCP/orderCompletedCP'); // RRDv6 } }); } ... }
·
Juan Pablo Isaza
Report
Answer question