为什么在使用传播运算符时我的数据不会呈现到我的卡片组件上?

Why wont my data render onto my card component when using spread operator?

我正在尝试通过解构 object 并使用扩展运算符将数据文件中的数据渲染到我的卡片组件上(如果我的行话有误,我深表歉意,我不知道用什么词来描述它).我以前在一个项目中做过这个,并试图复制我的做法,但数据不会呈现 - 在控制台中也没有问题。

我已经为它制作了一个代码沙盒 here - 您需要在新的 window 中打开它以查看卡片组件的运行情况,因为我还没有制作响应式布局所以它不会在较小的屏幕上呈现。

与此相关的重要文件是:

问题出在文件 PortfolioPageHero.js 中,您通过解构将数据传递到

<AnimatedCard {...PortfolioCardData1}/>

其中 PortfolioCardDetails1 是一个对象数组

export const PortfolioCardData1 = [
    {
        key: 2,
        image: "",
        title: "Recipe App",
        subtitle: "Built with React | Mobile First",
        buttonText: "Take a look"
    }
]

因此,当您在数组上使用扩展运算符来传递数据时,该数组将作为键值对传递 index : valueAtIndex 类似这样的东西

 "0": {
    key: 1,
    image: "",
    title: "Ecommerce",
    subtitle: "Built with react | Redux | Stripe",
    buttonText: "Take a look"
  }

因此,您可以通过执行 props.0.image 等访问此数据,或者您可以像这样在解构时传播对象

<AnimatedCard {...PortfolioCardData1[0]}/>

那么您当前的代码就可以工作了。