React - 为每个组件迭代计数器

Question

就像所有事情一样，这可能非常简单。我在将道具传递给组件时无法迭代计数（1、2、3、4 等，最多 50）：

const cards = []

const counter = 0

someData.map(() => {
  cards.push(<SomeCard count1={counter} count2={counter + 1} />)
})

它应该代表这样的东西（迭代到 50）：

<SomeCard count1="0" count2="1" />
<SomeCard count1="1" count2="2" />
<SomeCard count1="2" count2="3" />
<SomeCard count1="3" count2="4" />
<SomeCard count1="4" count2="5" />

IE 我想迭代“SomeCard”50 次，每次“count1”和“count2”按顺序攀登。非常感谢任何帮助！

Answer 1

改用地图回调中的索引 - 不要使用 .push，.map 用于从头开始创建新数组，不适用于 side-effects。

const cards = someData.map((_, i) =>
  <SomeCard count1={i} count2={i + 1} />
)

当一个数据可以完全由另一个确定时传递两个 props 是多余的 - 考虑完全放弃 count2，并在 SomeCard.

中计算它

Answer 2

首先，counter 不应该是一个常量。（使用 let）

其次，您需要增加 counter 变量。当前配置不会改变 counter 的值，因此它保持不变。
counter + 1 returns 一个值到 count2 而不改变 counter!
的值所以基本上你需要在分配给 count2

之前将值分配给 counter

counter = counter + 1

A shorthand 是 ++counter，您可以直接将其分配给 count2.

总的来说，是这样的：

const cards = []

let counter = 0

someData.map(() => {
  cards.push(<SomeCard count1={counter} count2={++counter} />)
})

React - 为每个组件迭代计数器

React - Iterate counter for each component

jsx

reactjs