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

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

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

但是，我无法在详细信息页面上显示任何json数据。我尝试过使用“match”方法，我使用了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;

视频的：id以以下方式包括在路径中：

[
    {   
        "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"
    }
] 

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

```re

```再

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

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

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

---

这段代码有几个问题：

{videos.id.map（（视频）=>{
})}

在您的代码中，

videos

变量最初是

null

，然后（在获取之后）是一个数组。数组没有

id

属性，访问

null

属性是非法操作。您可能希望首先确保这是一个数组，而不是

null

，然后还要删除“.id”部分

您不会从

.map（）

返回任何内容！是的，您为数组的每个项创建了一个JSX元素，但是在这之后它们将被销毁而不使用

考虑改用此选项：

{视频和视频.map（（视频）=>(
))}

---

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

从“/path/to/data.json”导入视频；
//后来
const[videos，setVideos]=useState（null）；

第一个变量

videos

（导入的变量）不再可见，它是由第二个变量获得的

您可以重命名第二个变量以防止阴影，也可以完全删除第一个变量，因为它未使用

---

我可以看到的下一件事是，代码无法决定它实际上要完成什么。一方面，路由器为特定的视频提供一个ID，这意味着我们试图只显示一个视频。然而，另一方面，

FeaturedVideo

组件几乎完全适合显示所有视频的列表

但从名称和整体设置来看，很明显，您试图显示的是一个视频，而不是整个列表

看起来您正在使用

react路由器

。如果这是真的，那么在

FeaturedVideo

中，您需要访问路由器提供的视频ID。假设它是v5+，您可以使用

useParams

hook来实现：

import React，{useState，useffect}来自“React”；
从“react router”导入{useParams}；

const[video，setVideo]=useState（null）；/'“视频”，而不是“视频”
const{videoID}=useParams（）；
useffect（（）=>{
fetch（“/src/data/data.json”）
.然后（（res）=>res.json（））
.然后（（视频）=>videos.filter（（视频）=>{
返回video.id==videoID；
}))
。然后（（匹配）=>setVideo（匹配[0]）；
}, []);
//此处的'video'变量包含'null'或第一个匹配的数组项。
//使用上面的建议呈现它。

---

参考资料：

• （请参见说明部分）

---

res也会返回一个承诺。您必须使用res.json（）将其解析为json。参见文档：看到这一点，我想您可能需要做的就是在您的语句中将.json（）添加到您的res中。然后还有一些事情。。。您正在映射video.id，而您应该只映射对象的videos数组，而且您没有返回

{videos.map（（video）=>{return}）

而且您的

'/'

（主路径）应该位于动态路径之前

'/:videoId'

您好！非常感谢您的回复。我以前试过，但也没有成功，但至少这仍然为我指明了正确的方向。我在回购协议的其他部分映射得很好，但是我在使用映射方法时收到的错误。“期望一个赋值或函数调用，而不是看到一个表达式没有未使用的表达式”，这对我们来说没有任何意义me@CarolinaKlein看我上面的评论，那是因为你没有返回任何东西。。。