时间戳

首页 > 解决方案 > React Hook useEffect 从本地 json 文件中获取数据以创建详细信息页面

javascript - React Hook useEffect 从本地 json 文件中获取数据以创建详细信息页面

问题描述

我正在构建一个详细信息页面以显示我的 json 文件中选定对象的详细信息。（单击缩略图将您带到视频页面，其中包括视频的详细信息）

到目前为止，我有 1) 数据文件 2) 您将选择要查看更多信息的项目的主页 3) 显示信息的页面。

但是，我无法在详细信息页面上显示任何 json 数据。我尝试过使用“匹配”方法，我使用了 Request.URL()，两者都不起作用，但我认为正确的方法是使用 useEffect 钩子（如果我错了，请纠正我）

这就是我目前使用 useEffect 路线所拥有的：

页面/FeaturedVideo.js：

import videos from '../../data/data.json'

const FeaturedVideo = () => {

    const [videos, setVideos] = useState(null);

     useEffect(() => {
        let url = "/src/data/data.json";
        fetch(url)
            .then(res => res.json())
            .then(videos => setVideos(videos))
        }, []);
    

    return(
        <div>
            <p>The video and it's details will go here </p>
            {videos.id.map((video) =>{
                <div key={video.id} {...videos}></div>
            })} 
        </div>
    )
}

export default FeaturedVideo;

我在上面尝试做的是使用 fetch 来调用 json 文件，就好像它是一个 API 一样。然后从特定的视频id中映射出数据。

json文件的结构如下：

[
    {   
        "id": 2,
        "firstLogo": "Minecraft",
        "thumbnail": "Thumbnail",
        "available": "Unlock 12/6",
        "sample": "https://www.youtube.com/watch?v=c_dG_HxHMVI"
    },
    {
        "id": 3,
        "firstLogo": "Batman",
        "thumbnail": "Thumbnail",
        "available": "Unlock 12/13",
        "sample": "https://www.youtube.com/watch?v=c_dG_HxHMVI"
    }
]

视频的 :id 通过以下方式包含在路径中：

<Router>
      <Navbar/>
      <Switch>
          <Route path="/:videoID">
            <FeaturedVideo/>
          </Route>
          <Route exact path="/">
              <Home />
          </Route>
      </Switch>
      <Footer />
    </Router>

```re

标签： javascriptjsonreactjsreact-hooks

解决方案

您使用该 useEffect 挂钩是正确的。您希望此数据在组件安装时加载。

假设 URL 返回 JSON，您可以简单地：

fetch(url)
  .then(res => res.json().then(videos => setVideos(videos)));

推荐阅读