声明 object.map() 返回错误 - 我忽略了什么？

Question

我会很感激第二双眼睛...

React 组件正在 useEffect() 中从 MariaDB 读入数据。正在无误地读入数据，console.log 显示正确的数据（见下图）。在 FunctionalComponent 的 return() 部分，我有这个代码：

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

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

我确定在 3:30am 我遗漏了一些明显的东西...

Answer 1

如果你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>

Answer 2

查看您的 console.log 输出，您可以看出 tableData 是一个对象，而不是数组。它说：

{tableData: {...}}

如果它是一个数组，它会说：

{tableData: [...]}

由于某种原因，tableData 对象碰巧有数字键，就像一个数组，但由于它实际上不是一个数组，所以 .map 不存在。

声明 object.map() 返回错误 - 我忽略了什么？

State object.map() returning error - what am I overlooking?

typescript

reactjs

preact