reactjs 为什么我的代码不工作React路由器DOM与.map和< link>?我得到错误[关闭]

dpiehjr4  于 2022-12-03  发布在  React
关注(0)|答案(1)|浏览(113)

**已关闭。**此问题为not reproducible or was caused by typos。目前不接受答案。

这个问题是由一个打字错误或一个无法再重现的问题引起的。虽然类似的问题在这里可能是on-topic,但这个问题的解决方式不太可能帮助未来的读者。
3天前关闭。
这篇文章3天前被编辑并提交审查。
Improve this question
这是在youtube教程使netflix
我猜问题是此行在我的代码,但我不能理解请有人向我解释这3行,为什么我的代码不工作这是我的代码,创建页脚的网站和链接,但不工作,我不能理解。什么是我的问题

{Links.map((link, index)  => (

                            <div key={index} className='col-span-1 md:col-span-2 lg:col-span-3 pb-3.5 sm:pb-0'>

                                <h3 className='text-md lg:leading-7 font-medium mb-4 sm:mb-5 lg:mb-6 pb-0.5'>{link.title}
                                </h3>
                                <ul className='text-sm flex flex-col space-y-3'>
                                    
                                        {links.map((text, index) => (

                                        <li key={index} classname="flex items-baseline">
                                            <Link to={text.link} className='text-border inline-block w-full hover:text-subMain'>
                                            {text.name}
                                            </Link>
                                        </li>

这是完整的代码

import React from 'react'
import { LivejournalShareButton } from 'react-share'
import { Link } from 'react-router-dom'

export default function Footer() {

const Links = [
    {
        title:'Company',
        links:[
            {
                name:'Home',
                link:'/'

            },
            {
                name:'About Us',
                link:'/about-us'
                
            },
            {
                name:'Contact Us',
                link:'/contact-us'
                
            },
            {
                name:'Movies',
                link:'/movies'
                
            }
        ]
    },
    {
        title:'Top Categories',
        links:[
            {
                name:'Action',
                link:'#'

            },
            {
                name:'Romantic',
                link:'#'
                
            },
            {
                name:'Drama',
                link:'#'
                
            },
            {
                name:'Historical',
                link:'#'
             }   
        ]
    },
            {
                title:'My Account',
                links:[
                    {
                        name:'Dashboard',
                        link:'/dashboard'
        
                    },
                    {
                        name:'My Favorites',
                        link:'/favorite'
                        
                    },
                    {
                        name:'Profile',
                        link:'/profile'
                        
                    },
                    {
                        name:'Change Password',
                        link:'/password'
                        
                    },
                ],
            },
        ]
    
  return (

        <div className='bg-dry py-4 border-t-2 border-black'>

            <div className='container mx-auto px-2'>

                <div className='grid grid-cols-2 md:grid-cols-7 xl:grid-cols-12 gap-5 sm:gap-9 lg:gap-11 xl:gap-7 py-10 justify-between'>

                    {Links.map((link, index)  => (

                            <div key={index} className='col-span-1 md:col-span-2 lg:col-span-3 pb-3.5 sm:pb-0'>

                                <h3 className='text-md lg:leading-7 font-medium mb-4 sm:mb-5 lg:mb-6 pb-0.5'>{link.title}
                                </h3>
                                <ul className='text-sm flex flex-col space-y-3'>
                                    
                                        {links.map((text, index) => (

                                        <li key={index} classname="flex items-baseline">
                                            <Link to={text.link} className='text-border inline-block w-full hover:text-subMain'>
                                            {text.name}
                                            </Link>
                                        </li>      
                                        ))
                                        }
                                
                                </ul>    
                            </div>
                    ))}

                </div>

            </div>

        </div>
    
    );
}
pvabu6sv

pvabu6sv1#

“链接”是您的变量,它是定义的。但“链接”不是由您定义的。
您可以使用类似下面的代码来访问顶级数组中的数据:

Links.map ( e => (
     ....
     e.name
     ....

     e.links.map(element => (
          .....
          element.name
          .....
          element.link
          .....
     ))

))

这里,“Links”是您定义的包含JSON数组的顶级数组。“e”是每个顶级JSON,它包含一个“title”和一个称为“links”的其他JSON数组。“element”是前面提到的数组“links”的每个JSON,它包含“name”和“link”。
希望能有所帮助。

相关问题