為什么索引顯示 [object Object] 而不是 React 中的 integer？

Question

自從我使用 React 已經有一段時間了，但我遇到了一個問題。

當我在 map function 中控制台記錄我的索引時，我的控制台顯示：

但隨后我的瀏覽器中的結果顯示：

[對象對象]1

我希望這會顯示索引 + 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;

任何想法我做錯了什么？

Answer 1

您沒有在 Step 組件中解構index ，因此“索引”是您的整個道具 object：

function Step(index: any) {

應該：

function Step({index: any}) {