为什么索引显示的是[对象对象]而不是反应中的整数？

Question

我已经有一段时间没有反应了，但我有问题了。

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

​

​

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

对象Object1

​

我希望这能显示索引+ 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，因此"index“是您的整个支持对象：

function Step(index: any) {

应：

function Step({index: any}) {