来自对象的动态 React 导航栏

Question

我正在做一个个人 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;

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

Answer 1

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

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

来自对象的动态 React 导航栏

Dynamic React navbar from an object

object

navbar

reactjs

react-router

react-router-dom