如何在 React JS 中打开一个新页面并在它们之间传递数据

Posted 2023-02-21

【中文标题】如何在 React JS 中打开一个新页面并在它们之间传递数据

【英文标题】：How to open a new page and pass data between them in React JS

【发布时间】：2022-01-22 19:44:49

【问题描述】：

我正在升级我的项目的搜索栏。我希望当我按下其中一个结果时会打开一个新页面，其中包含所选对象的所有数据。这是在链接中显示搜索结果的函数代码，理论上，当我按下名称时，我应该转到将对象传递给新页面的页面。

  filteredData.length != 0 && (
    <div className="dataResult">
      filteredData.slice(0, 3).map((obj, key) => 
        return (
          <Link
            className="dataItem"
            to= pathname: "/SelectedObj", state: obj 
          >
            obj.Name
          </Link>
        );
      )
    </div>
  );

所以这部分代码可以工作，但是新页面没有任何结果，我无法理解如何访问我传递给新页面的对象。这里是新页面的代码。

function SelectedUser() 
  return <h1>Hello world</h1>;

我不明白的是为什么它没有向我显示 Hello world，除了如何访问传递的对象。

编辑：我检查过，但忘记更新路由部分。现在一切正常，谢谢。

【问题讨论】：

请添加路由部分（通常在 App.js 中定义的路由）。

【参考方案1】：

要访问传递给新页面的对象，

使用 useLocation 钩子，它是一个返回包含有关当前 URL 信息的位置对象的函数。每当 URL 发生变化时，都会返回一个新的位置对象。

import  useLocation  from "react-router-dom";

    function SelectedUser() 
    const location = useLocation();
    console.log(location.state);

        return (
          <h1>Hello world</h1>
       )
    

【讨论】：

好的，但是当我按下结果时它会更改页面，但该页面是空白的并且“不起作用”。

@Dodo1991 错误可能是定义路由时组件导出或导入不正确造成的，否则贴出的代码是正确的。同样在评论中，我请求了定义路由的代码。

【参考方案2】：

使用道具从父母到孩子

试想一下app的目录结构如下：父组件实际渲染app中的子组件。

App
 └── Parent
   ├── Child1
   └── Child2

这是 React 中最简单最基本的数据流向。

class Parent extends React.Component state =  data : "Hello World"  
render() 
        
        return (
            <div>
                 <Child1/>            //no data to send             
                 <Child2 dataFromParent = this.state.data />
            </div>
        );    

使用变量this.props.dataFromParent获取父子传递的数据。

class Child2 extends React.Component 
 render() 
         
         return (
             <div>
                 Data from parent is:this.props.dataFromParent
             </div>
         );
     
 

使用回调从子级到父级

假设您想从 child1 向父母发送一条消息，其中包含“你好，你好吗？”的消息。采取以下步骤：

在 Parent.js 中，设置一个回调函数以接收您从子级访问的参数。 将回调函数作为 props 发送给 child1.js。

class Parent extends React.Component 
state =  message: "" 
callbackFunction = (childData) => 
      this.setState(message: childData)
,


 render() 
        return (
            <div>
                 <Child1 parentCallback = this.callbackFunction/>
                 <p> this.state.message </p>
            </div>
        );

在 child1.js 中使用 this.props.callback(dataToParent) 传递您的数据。

class Child1 extends React.ComponentsendData = () => 
         this.props.parentCallback("Hey Popsie, How’s it going?");
    ,

render()  
//Any time you wish to send data from child to parent component, call the sendData function.
    
;

【参考方案3】：

链接

<Link to="dataitem"
    state= state : "value" 
>Navigate</Link>

并在数据项页面中使用 useLocation 来获取这样的数据

import  useLocation  from "react-router-dom";

   const location = useLocation();

   console.log(location.state);

【讨论】：

这个 React Router V6 顺便说一句