来自对象的动态 React 导航栏

Posted 2023-02-19

【中文标题】来自对象的动态 React 导航栏

【英文标题】：Dynamic React navbar from an object

【发布时间】：2022-01-21 07:52:42

【问题描述】：

我正在做一个个人React.js 项目。我想从我正在使用的 API 动态地执行导航栏。我想显示电影列表的链接。问题是API 带来了一个对象，我不知道如何执行代码。这是代码：

import  useState  from "react";
import   BrowserRouter, Link  from "react-router-dom";
const Navbar = () => 
    const [result, setResult] = useState([]);

    const fetchData = async () => 
        const res = await fetch("https://www.swapi.tech/api/films/");
        const json = await res.json();
        setResult(json.result);
    
    useEffect(() => 
        fetchData();
    , []);
    
    return (
        <>
        <BrowserRouter>
        result.map((value, key) =>  
            <Link />
        )
        </BrowserRouter>
        </>
    );

 
export default Navbar;

也许除了动态之外还有另一种方法可以做到这一点。 此外，我还有另一个组件，其中包含渲染的电影列表。理想情况下，我希望能够单击该列表中的每个项目并转到带有其描述的新页面。导航栏的链接将转到相同的页面。 提前致谢！

【问题讨论】：

动态导航栏是指您想从 API 响应中生成链接吗？你想链接到什么？您在哪里渲染链接到的路线？

嗨@DrewReese 我刚刚更新了帖子。我有另一个组件，其中包含渲染的电影列表。理想情况下，我希望能够单击该列表中的每个项目并转到带有其描述的新页面。导航栏的链接将转到相同的页面。

如果你有另一个组件渲染电影列表，那些渲染每部电影的链接的组件如何？我们能看到那个组件的代码吗？ that 其他组件是否获取与Navbar 相同的数据？您有任何要链接的路线吗？你试过什么？

【参考方案1】：

试试这个方法来处理你的 API 响应

 <BrowserRouter>
   result.map((value) => (
      <Link to=value._id>value.description</Link>
    ))
  </BrowserRouter>