React JS 如何在 Hook 中的页面之间传递数据(useEffect) [英] React JS How to pass data between pages in Hook ( useEffect)

问题描述

我试图将一个数据对象传递到另一页，但我无法获取第二页上的数据.下面的代码是我正在使用

I am trying to pass one data object to another page, but I can't fetch the data on the second page. below code is I am using

第一页在LINK中传递数据

The first page pass the data in LINK

 <Link to={{ pathname: `${path}/users/${organization.id}`,
                                            data: organization
                                        }}>  <img src={config.s3Bucket + "/" + organization.logo} />
 </Link >

这里我在'data'参数中传递对象

Here I am passing the object in the 'data' parameter

第二页

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 };

我已经尝试了'location.data'和'this.props.location'，但我无法获取数据，请帮我解决这个问题.

I have tried the 'location.data' and 'this.props.location' but I can't fetch the data, please help me to solve this issue.

推荐答案

你可以这样做

<Link to={{ pathname: `${path}/users/${organization.id}`, state: organization}}>
   <img src={config.s3Bucket + "/" + organization.logo} />
 </Link >

在第二页

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 };

这篇关于React JS 如何在 Hook 中的页面之间传递数据(useEffect)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！