React JS Come passare dati tra le pagine in Hook (useEffect)
Aug 21 2020
Sto tentando di passare un oggetto dati a un'altra pagina, ma non riesco a recuperare i dati nella seconda pagina. sotto il codice è che sto usando
La prima pagina passa i dati in LINK
<Link to={{ pathname: `${path}/users/${organization.id}`,
data: organization
}}> <img src={config.s3Bucket + "/" + organization.logo} />
</Link >
Qui sto passando l'oggetto nel parametro 'data'
Seconda pagina
import React, { useState, useEffect } from 'react';
function UserList({ history, match }) {
const { path } = match;
const { id } = match.params;
const [organization, setOrganization] = useState(null);
// const { data } = this.props.location
useEffect(() => {
// console.log(location.data);
}, []); } export { UserList };
Ho provato "location.data" e "this.props.location" ma non riesco a recuperare i dati, per favore aiutami a risolvere questo problema.
Risposte
5 spycbanda Aug 21 2020 at 17:42
Puoi farlo in questo modo
<Link to={{ pathname: `${path}/users/${organization.id}`, state: organization}}>
<img src={config.s3Bucket + "/" + organization.logo} />
</Link >
e nella seconda pagina
import React, { useState, useEffect } from 'react';
import {useLocation} from 'react-router-dom';
function UserList({ history, match }) {
const { path } = match;
const { id } = match.params;
const [organization, setOrganization] = useState(null);
const { state } = useLocation();
useEffect(() => {
console.log(state);
}, []);
}
export { UserList };
MA2WEB Aug 21 2020 at 17:48
utilizzare con Router
import { withRouter } from "react-router-dom"
export default withRouter(ComponentName)