如何解决状态object.map返回错误-我忽略了什么?
我希望能再欣赏一眼……
React Component正在useEffect()中从MariaDB读取数据。数据正在被正确读取,并且console.log显示正确的数据(请参见下图)。在FunctionalComponent的return()
部分中,我有以下代码:
<div class={style.tblBody}>
{tableData !== undefined &&
tableData.map((row: RDPresData) => {
return `<div>${row.title}</div>`;
})}
</div>
我确定在凌晨3:30我遗漏了一些明显的东西...
解决方法
如果您这样做,console.log(tableData)
会获得以上结果。因此,您应该正确获取对象tableData
并将其解析为数组以使用map
。因为map函数适用于数组。
您的tableData
是一个对象。在使用map
之前,您应该先获取值。
<div class={style.tblBody}>
{tableData?.tableData !== undefined &&
Object.values(tableData.tableData).map((row: RDPresData) => {
return `<div>${row.title}</div>`;
})}
</div>
,
通过查看console.log输出,您可以知道tableData
是一个对象,而不是数组。它说:
{tableData: {...}}
如果它是一个数组,它会说:
{tableData: [...]}
由于某种原因,tableData
对象恰好具有数字键,就像数组一样,但是由于它实际上不是数组,因此.map
不存在。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。