自從我使用 React 已經有一段時間了，但我遇到了一個問題。
當我在 map 函式中 console.log 我的索引時，我的控制臺會顯示：
![為什么索引顯示 [object Object] 而不是 React 中的整數？](https://img.uj5u.com/2022/09/06/124acc425c6f42c8b0679130515483e5.png)
但隨后我的瀏覽器中的結果顯示：
[物件物件]1
![為什么索引顯示 [object Object] 而不是 React 中的整數？](https://img.uj5u.com/2022/09/06/88bd6268465f4dc493118285d62d7373.png)
我希望這會顯示索引 1，所以第一個是 1，第二個是 2，第三個是 3，依此類推。這是我的代碼：
import React from "react";
import Container from '../Container'
import content from '../../content/landing'
function Step(index: any) {
return (
<div className="rounded-full h-12 w-12 bg-yellow border-4 border-black">
{index 1}
</div>
)
}
function HowItWorks() {
const listItems = content?.howto?.map((c:any, index:any) => {
console.log(index, 'index')
return (
<div className="mb-12 filter-none shadow-1 bg-white p-4 py-8 rounded-lg border-4 border-black" key={index}>
<Step index={index}/>
<h3 className="text-xl font-bold">{c.title}</h3>
<p className="text-xl">{c.text}</p>
</div>
)
}
);
return (
<div className="bg-purple-600 py-12">
<Container>
<h2 className="text-4xl text-white font-bold">How it works</h2>
{listItems}
</Container>
</div>
);
}
export default HowItWorks;
任何想法我做錯了什么？
uj5u.com熱心網友回復：
您沒有index在 Step 組件中進行解構，因此“index”是您的整個 props 物件：
function Step(index: any) {
應該：
function Step({index: any}) {
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/504642.html
標籤：javascript 反应 打字稿 循环 下一个.js
下一篇：如何找到最佳