在 myArray.map(x => ) 之前添加一个子元素会导致从数组中只呈现一个子元素答案

【问题标题】：Adding a child element before myArray.map(x => ) causes only one child to be rendered from the array在 myArray.map(x => ) 之前添加一个子元素会导致从数组中只呈现一个子元素
【发布时间】：2020-08-30 03:39:14
【问题描述】：

抱歉，我不知道如何正确解释这个问题。

我有以下代码。就目前而言，myArray 有 10 个元素。

如果我在.map 上方有<LeadingChild/> 组件，则仅显示10 个元素中的第一个。

<Slider>
    <LeadingChild/>
    {myArray.map(x => (<Card cardTitle={x.title} shortDescription={x.shortDescription} Link= {x.link}></Card>))}
</Slider>

像下面这样删除<LeadingChild/> 组件，可以让这10个元素正常显示。

<Slider>
    {myArray.map(x => (<Card cardTitle={x.title} shortDescription={x.shortDescription} Link= {x.link}></Card>))}
</Slider>

不会抛出任何错误。

我希望最终结果同时显示主要子元素和 myArray 中存在的所有元素

更新：我创建了一个新的 ReactNode 数组，我预先填充了 myArray 中的所有元素，但数组中也包含了 <LeadingChild/>。

这已经解决了问题，但感觉像是一个肮脏的解决方案。

【问题讨论】：

标签： reactjs typescript next.js map-function

【解决方案1】：

我无法准确解释为什么会发生这种情况，但我很确定这是因为您的映射元素中缺少 key 属性。

React 使用 key 属性来重新渲染比较，并且不使用现有的 key 渲染元素（元素表示 html 列表的项目）。当这些列表元素根本没有 key 属性时，可能会出现一些奇怪的行为。

尝试为您的 Card 元素添加唯一键，如下所示：

{ myArray.map(elem => <Card key={elem.id} />) }

【讨论】：

对不起，我不太明白。您能否提供一个基本示例
@DamianJacobs 有帮助吗？
您的解释很好，但不幸的是，作为解决方案没有运气。结果相同。我通过将我的leadingChild 组件添加到数组并将数组更改为 ReactNode 的数组来做对了。我会进一步调查，看看我是否可能只是遗漏了一些小东西。非常感谢您的时间和精力。