如何在 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[=] 找到 数据31=] 而不是将其映射到布尔值。请记住，您的 id 属性是一个数字，但 id 路由参数将是一个字符串，因此您需要将它们转换为兼容类型以实现严格相等（===) 检查。

示例：

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

由于 data 在渲染中被视为一个对象 return 您需要确保保持有效的状态不变。将初始 data 状态更新为对象，并检查 Array.prototype.find return 在更新状态之前从 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}
    </>
  );
};

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

How to pass JSON data using useNavigation Hooks in React Js?

javascript

reactjs

react-hooks

use-effect

use-state