Question

我似乎无法在没有类型错误的情况下将'name'属性传递给组件。我有一个以{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

Answer 1

您的地图回调具有错误的参数。第一个参数是值，第二个参数是索引（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}
  />)
})

Answer 2

我假设reslist是一个对象数组。当您在对象数组上调用.map时，第一个参数（在您的示例中，i）是每个对象。第二个参数是索引。我认为您将两者混为一谈。

reslist.map((item, i) => (
    <CodeCard
        key={i}
        name={item.name}
    />
))

Answer 3

导入组件不需要具有.js：
使用import { CodeCard } from '../CodeCard'
对其进行编辑 ps：请不要开枪我

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

3 个答案: