如何迭代和获取React State对象值

Question

这是我的简单react组件。

export default function App() {
const [stats, setStats] = React.useState(() => {
return {
name: "",
lvl: 1
}})
let displayStats; 
for(let key in stats) {
displayStats += <p>{key}</p>
}
return (
<>
{displayStats}
</>
)
}

此displayStats变量在屏幕上返回"undefined[object object][object object]"。为什么？我做错了什么。

Answer 1

将代码更改为此

return (
<>
{Object.keys(stats).map(key => <p>{key}</p>)}
</>
)

->如果只想迭代值，请使用Object.values(objName(

->如果您想遍历值和键，请使用Object.entries(objName(

Answer 2

尝试使用stats对象上的键。

更改

displayStats += <p>{key}</p>

到

displayStats += <p>{stats[key]}</p>