来自对象的动态 React 导航栏答案

【问题标题】：Dynamic React navbar from an object来自对象的动态 React 导航栏
【发布时间】：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 相同的数据？您有任何要链接的路线吗？你试过什么？

标签： reactjs object react-router navbar react-router-dom

【解决方案1】：

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

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

【讨论】：