![](/img/trans.png)
[英]Why is my object in React showing an undefined Object value?
[英]Why the index is showing [object Object] and not an integer in React?
自从我使用 React 已经有一段时间了,但我遇到了一个问题。
当我在 map function 中控制台记录我的索引时,我的控制台显示:
但随后我的浏览器中的结果显示:
我希望这会显示索引 + 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;
任何想法我做错了什么?
您没有在 Step 组件中解构index
,因此“索引”是您的整个道具 object:
function Step(index: any) {
应该:
function Step({index: any}) {
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.