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

Question

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

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

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

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

pages/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。然后从具体的video 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

Answer 1

这个 sn-p 有几个问题：

{videos.id.map((video) => {
  <div key={video.id} {...videos}></div>
})}

1. 在您的代码中，videos 变量最初是 null，然后（在获取之后）是一个数组。数组没有id 属性，访问null 的属性是非法操作。您可能需要先确保这是一个数组，而不是 null，然后还要删除“.id”部分。

2. .map() 没有返回任何东西！是的，您为数组的每个项目创建了一个 JSX 元素，但之后它们会被销毁而不使用。

考虑改用这个：

{videos && videos.map((video) => (
  <div key={video.id} {...videos}></div>
))}

---

另一个问题是变量的可见性：

import videos from "./path/to/data.json";
// and then later
const [ videos, setVideos ] = useState(null);

第一个变量videos（导入的）不再可见，第二个变量shadowed。

您要么重命名第二个变量以防止出现阴影，要么完全删除第一个变量，因为它未使用。

---

接下来我可以看到，代码无法确定它实际要完成的工作。一方面，路由器为特定的特定视频提供 ID，这意味着我们试图只显示一个视频。但另一方面，FeaturedVideo 组件几乎非常适合显示所有视频的列表。

不过，从名称和整体设置来看，很明显您是在尝试展示一个视频，而不是整个列表。

看起来您正在使用react-router。如果是这样，在FeaturedVideo 中，您需要访问路由器提供的视频 ID。鉴于它是 v5+，您可以使用 useParams 钩子：

import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router';

const [ video, setVideo ] = useState(null); // 'video', not 'videos'
const { videoID } = useParams();

useEffect(() => {
  fetch("/src/data/data.json")
    .then((res) => res.json())
    .then((videos) => videos.filter((video) => {
      return video.id === videoID;
    }))
    .then((matched) => setVideo(matched[0]));
}, []);

// Here `video` variable holds either `null` or the first matched array item.
// Render it using suggestions above.

---

参考资料：

• .map() method of arrays
• && operator（见描述部分）
• Variable shadowing
• React Router Hooks

Answer 2

您使用该 useEffect 钩子是正确的。您希望此数据加载到组件挂载上。

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

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