状态object.map返回错误-我忽略了什么？

编程问答 2022-06-10

问题描述

我希望能再欣赏一眼……

React Component正在useEffect（）中从MariaDB读取数据。数据正在被正确读取，并且console.log显示正确的数据（请参见下图）。在FunctionalComponent的return()部分中，我有以下代码：

<div class={style.tblBody}>
   {tableData !== undefined &&
      tableData.map((row: RDPresData) => {
         return `<div>${row.title}</div>`;
   })}
</div>

这是我收到的控制台错误（请注意红色错误上方的记录数据）。

enter image description here

我确定在凌晨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不存在。

preactreactjsreactjsreactjsreactjstypescripttypescripttypescript