地图数组不显示在表格中答案

【问题标题】：Map array dont show in table地图数组不显示在表格中
【发布时间】：2020-12-14 14:14:58
【问题描述】：

我需要在我的页面中映射一个数组，并将结果显示在一个表格中，但是当我编译页面时内容没有显示出来。

谁能帮帮我？

当我在控制台中打印 var 的内容时，就在这里。但是信息没有显示在页面中

import Layout, { siteTitle } from '../components/layout'

const fetch = require('node-fetch');


export default function Home({ devices }) {
  return (
    <Layout >
      {devices.map((device) => (
        <table>
          <thead>
            <th>
                {device.localname} / {device.localIP}  
            </th>
          </thead>  
          {console.log('1')}
          <tbody>
            <tr>
              <td>
                {device.IPaddress[0][3].value} // I put this to test, and this works fine
              </td>
            </tr>
            {device.IPaddress.map((port) =>{
              <tr>
                <td>
                  {console.log(port[3].value), port[3].value} // here I need to work, I want to put all results of port in a TD tag, the console.log shows up the info, but the page not.
                </td>
              </tr>
            })}
          </tbody>
        </table>
      ))}
    </Layout >
      
  )
}

export async function getStaticProps() {
  const res = await fetch('http://localhost:3000')
  const devices = await res.json()

  return {
    props: {
      devices
    }
  }
}

【问题讨论】：

您能否提供一份您尝试将表映射到的 JSON 响应或数据的副本？
添加 return 或 change { 为 (
感谢@evgenifotia，这很完美，你能解释一下这个改变的概念吗？
@Kelvin感谢您的帮助，evgenifotia 发布的答案工作正常。但对于信息，json 格式如下：{ localname, localIP, [{ obeject, object }] }
w3schools.com/js/js_arrow_function.asp

标签： node.js arrays frontend next.js array-map

【解决方案1】：

正如@evgenifotia 所评论的，在第二个数组映射中更改 ( for { 工作正常。

这里是最终功能：

export default function Home({ devices }) {
  return (
    <Layout >
      {devices.map((device) => (
          <table>  
            {console.log('1')}
            <tbody>
              <tr>
                <th>
                    {device.localname} / {device.localIP}  
                </th>
              </tr>  
              {device.IPaddress.map(port =>(
                <tr>
                  <td>
                    {console.log(port[3].value), port[3].value}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
      ))}
    </Layout >
      
  )
}

【讨论】：