在控制台中反应 tsx 嵌套数组打印数据，但不在 HTML 中答案

【问题标题】：React tsx nested array print data in console but not in HTML在控制台中反应 tsx 嵌套数组打印数据，但不在 HTML 中
【发布时间】：2021-05-07 07:56:00
【问题描述】：

keylist 数组中有一个列列表，item 数组中有所有数据。

以下代码在控制台中运行良好。但是在反应中它显示了这个错误An error occurred while rendering the visualization: Error: Objects are not valid as a React child (found: Invalid Date). If you meant to render a collection of children, use an array instead.

   <div>
   {
    data.map((item) => {
     console.log("new row: ")
      return (
       <div className="row">
        {
          keylist.map(subitem => {
           return(
            // <p>{item[subitem]}</p>
            console.log(item[subitem])
           )
          })
         }
         </div>
        )
       })    
      }
     </div>

【问题讨论】：

将控制台日志放在return语句之前。
并从您的 return 语句中返回一个有效元素。这应该工作
@ahmed 你能给我一个有效返回元素的例子吗？
return ( console ) 有效，但我想打印该元素。 return ( <p>{item[subitem]}</p>)有问题
我在答案中提供了解决方案。希望对您有所帮助。

标签： javascript arrays reactjs apache-superset tsx

【解决方案1】：

这是一个例子。这是打印数据并在屏幕上显示。有帮助的笑话

https://codesandbox.io/s/reverent-cherry-hvwr4?file=/src/App.js

【讨论】：

问题由return <p> String(item[subitem]) </p> 解决。谢谢您的帮助。 :)