时间戳

首页 > 解决方案 > 为什么在地图中传递道具时会出现类型错误？

reactjs - 为什么在地图中传递道具时会出现类型错误？

问题描述

如果没有类型错误，我似乎无法将“名称”道具传递给组件。我有一个对象数组作为 {reslist} 传入，并且该数组中的每个对象都有一个徽标和名称值。我似乎无法将名称或徽标传递到我的退货中。 

import React from 'react';
import './Resources.css'
import CodeCard from '../CodeCard/CodeCard.js'

const Resources = ({ reslist }) => {
    return (

        <div>
            <h3 className='resCall'>Check out my Code!</h3>
            <div className='resCards'>
                { reslist.map((i) => {
                        return ( <CodeCard 
                        key={i}
                        name={reslist[i].name}


                        />
                        );
                })


                }
            </div>

        </div>
        )
}

export default Resources;

这是错误

TypeError：无法读取未定义的属性“名称”（匿名函数）

这是我的资源列表

const ResList = [
{
    logo: 'https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png',
    name:'GitHub'
},
{
    logo: 'https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png',
    name:'GitHub'
},
{
    logo: 'https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png',
    name:'GitHub'
},
{
    logo: 'https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png',
    name:'GitHub'
},


]

export default ResList

标签： reactjs

解决方案

您的地图回调参数不正确。第一个参数是值，第二个是索引（ref）：

reslist.map((value, index) => {
  return (<CodeCard 
      key={index}
      name={reslist[index].name}
  />)
})

当然，你也可以value直接使用：

reslist.map((value, index) => {
  return (<CodeCard 
      key={index}
      name={value.name}
  />)
})

推荐阅读