如何在React Js中使用useNavigation Hooks传递JSON数据？

Question

这是我在应用程序中创建的 Json 文件。

export const Data = [
    {
        id: 1,
        title: "Tilte 1",
        description: "Decription 1 Data",
    },
    {
        id: 2,
        title: "Tilte 2",
        description: "Decription 2 Data",
    }
];

这是我导航的主文件。我使用json文件来显示页面上的所有记录。当我单击所选项目时，它将获取其 id 并导航到另一个页面，在其中我可以获取来自 json 的所选项目的数据。

import React from "react";
import { Data } from "./JSON"
import { useNavigate } from 'react-router-dom'

const Home = () => {
    let naviagte = useNavigate();
    return (
<>


         {Data.map((data, key) => {
            return (
            <div class="card" >
                <div class="card-body">
                    <h5 class="card-title" key={key.id}>{data.title}</h5>
                    <p class="card-text">{data.description}</p>
                    <button onClick={() => naviagte(`/service/${data.id}`)}>{data.title} </button>
                </div>
            </div>
            );
          })}
     </>

    )
}
export default Home;

当我导航到另一个页面时，我想显示有关所选 ID 的所有数据。它只显示 id，不显示所有数据。

import React, {useState, useEffect} from "react";
import { Data } from "../home/JSON"
import { useParams } from "react-router-dom";

const Service = () => {

    const { id } = useParams();

    const [data, setData] =useState('');
    console.log("check", data);
  
     useEffect(() => {
      setData (Data.map((_data) => _data.id === id ))
     }, [id])


    return(
        <>
{id}
{data.title}
{data.description}
        </>
    )
}

export default Service;

请指导我我在这里想念什么。提前致谢

Answer 1

由于您要在这两个位置导入数据，因此您只需通过 id 属性查找数据，而不是将其映射到布尔值。请记住，您的 id 属性是一个数字，但 id 路由参数将是一个字符串，因此您需要将它们转换为兼容类型以实现严格相等（ ===) 检查。

示例：

useEffect(() => {
  setData(Data.find((_data) => String(_data.id) === id));
}, [id]);

由于 data 在渲染返回中被视为对象，因此您需要确保保持有效的状态不变性。将初始 data 状态更新为对象，并在更新状态之前检查 Array.prototype.find 从 Data 数组返回已定义的对象。

const Service = () => {
  const { id } = useParams();

  const [data, setData] = useState({});
  console.log("check", data);
  
  useEffect(() => {
    const data = Data.find((_data) => String(_data.id) === id);   
    if (data) {
      setData(data);
    }
  }, [id]);

  return (
    <>
      {id}
      {data.title}
      {data.description}
    </>
  );
};