如何通过ReactJS中的useNavigation钩子传递对象数据？

问题描述

下面提到的代码是reactJS页面，在该页面中，我希望有一个按钮将我路由到带有恐怖对象中提到的一些对象数据的detailsPage

import React,{ useState } from "react";
import {useNavigate} from "react-router-dom";
import DetailsPage from "./detailsPage";

function Horror() {
    let navigate= useNavigate(); //object{navigate:}
    const [horror,sethorrorData]=useState([
        {
            name:"Horror Book 1",id:"1",},{
            name:"Horror Book 2",id:"2",]);

这是handleclick功能，它将把数据发送到详细信息页面，但是给出了错误的位置。详细信息页面中的state = null表示没有数据通过此函数。

   function handleClick()
    {
        navigate("/detailsPage",{ state : horror });
        // alert(horrorData[0]);
    }

下面的代码将在恐怖页面上显示一个按钮，该按钮将在单击时显示详细信息页面，但此处未显示任何数据。

  return(
        <div>
            <h1 style={{color:"black"}}>Horror Books</h1>
            <button onClick={handleClick}>More details</button>
            {/* <DetailsPage data={horrorData}/> */}
        </div>
    );
}
export default Horror;

这是详细信息页面的代码，用于通过useLocation挂钩从恐怖页面获取数据。

import React from "react";
import { useLocation } from "react-router-dom";

function DetailsPage() {
    let location= useLocation(); 
    alert(location.state) ;
    // console.log(location.state[0]);
    return(
        <div>
            <h1>Details</h1>
            alert(location.state) ;

            {location.state.map((val,index)=>{
                return(
                    <>
                    <h4>BOOK NAME: {val.name}</h4>
                    <p>{val.id}</p>
                    </>
                );
            })}
        </div>
    );
}
export default DetailsPage;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

react-hooks reactjs reactjs