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

Question

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

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

与此相关的重要文件是：

PortfolioCardData.js（存储导出的数据）
PortfolioPageHero.js（呈现 AnimatedCard 的地方，我将数据作为 object 传播到卡片中）
AnimatedCard.js & AnimatedCardDetails.js - 我在函数括号中解构一个 object，然后使用 objects 放置标题、图像等所在的位置

Answer 1

问题出在文件 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]}/>

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

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

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

javascript

reactjs

rendering