在JSX中显示对象数据

Question

我的状态有这个对象： console.log（state）

我创建了一个组件来渲染此对象中每个条目的卡片（在对象下）

我已经尝试了所有事情，但是我总是会遇到错误。这是我的最后一次尝试：

import { useState } from "react"

export default function Categories(props: any) {
    const [listOfCategories, setListOfCategories] = useState(props.datas.categories)

    console.log(listOfCategories)
    return (
        <>
            {listOfCategories.map(category => {
                return (
                    <div key={category} className="relative flex flex-wrap h-96 my-20">
                        <div className="absolute right-0 top-0 h-full">
                            <img className="rounded-lg max-w-full h-96" src="https://double-you-design.fr/wp-content/uploads/2016/04/dummy-post-horisontal.jpg" alt="" />
                        </div>
                        <div className="absolute -bottom-10 bg-white rounded-lg shadow-lg w-7/12 h-48 p-8">
                            <p key={category}>{category}</p>
                        </div>
                    </div>
                )
            })
            }
        </>
    )
}

错误是：listOfCategories.map不是函数。

我的问题是：最简单的方法是什么？ 您有建议还是例子？

我正在使用打字稿。

非常感谢 ！

Answer 1

您不能在对象上使用.map，因为它是数组的一种方法。

您可以使用 so：

import { useState } from "react"

export default function Categories(props: any) {
    const [listOfCategories, setListOfCategories] = useState(props.datas.categories)

    console.log(listOfCategories)
    return (
        <>
            {Object.keys(listOfCategories).map((key, ind) => {
                return (
                    <div key={ind} className="relative flex flex-wrap h-96 my-20">
                        <div className="absolute right-0 top-0 h-full">
                            <img className="rounded-lg max-w-full h-96" src="https://double-you-design.fr/wp-content/uploads/2016/04/dummy-post-horisontal.jpg" alt="" />
                        </div>
                        <div className="absolute -bottom-10 bg-white rounded-lg shadow-lg w-7/12 h-48 p-8">
                            <p key={ind}>{listOfCategories[key].category}</p>
                        </div>
                    </div>
                )
            })
            }
        </>
    )
}

这是一个简单的可运行示例，要说明：

var obby = { a: { category: 'Estimation' }, b: { category: 'Prospection' } }
const categories = Object.keys(obby).map(key => obby[key].category)
console.log(categories)

另一个选项是更改数据结构，以便您拥有一系列对象而不是对象的对象 - 如果您对该数据结构有控制权。如果没有，您可以首先将对象转换为数组。

const obby = { estimate: { category: 'Estimation' }, prospecting: { category: 'Prospection' } }
const arr = Object.values(obby)
const categories = arr.map(val => val.category)
console.log(categories)

代码中的以上方法：

import { useState } from "react"

export default function Categories(props: any) {
    const [listOfCategories, setListOfCategories] = useState(props.datas.categories)

    const listOfCategoriesArray  = Object.values(listOfCategories)
    return (
        <>
            {listOfCategoriesArray.map((item, ind) => {
                return (
                    <div key={ind} className="relative flex flex-wrap h-96 my-20">
                        <div className="absolute right-0 top-0 h-full">
                            <img className="rounded-lg max-w-full h-96" src="https://double-you-design.fr/wp-content/uploads/2016/04/dummy-post-horisontal.jpg" alt="" />
                        </div>
                        <div className="absolute -bottom-10 bg-white rounded-lg shadow-lg w-7/12 h-48 p-8">
                            <p key={ind}>{item.category}</p>
                        </div>
                    </div>
                )
            })
            }
        </>
    )
}