为什么 React 中索引显示 [object Object] 而不是整数？

Question

我已经有一段时间没有使用 React，但我遇到了一个问题。

当我在地图函数中 console.log 我的索引时，我的控制台向我显示：

但随后我的浏览器中的结果显示：

[对象对象]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

您不会index在 Step 组件中进行解构，因此“index”是您的整个 props 对象：

function Step(index: any) {

应该：

function Step({index: any}) {