在控制台打印，但不在页面上？

Question

有人能发现这里的问题吗？

import React from 'react'

export default function CoinTable(props){
    props.data.map(row=> {
        console.log(row.first_name)
    })

    return (
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Phone</th>
                    <th>Email</th>
                    <th>Subscription</th>
                </tr>
            </thead>
            <tbody>
                {
                    props.data.map(row => {
                        <tr>
                            <td>{row.first_name} {row.last_name}</td>                     
                            <td>{row.phone}</td> 
                            <td>{row.email}</td>                                           
                        </tr>
                    })
                }
            </tbody>
        </table>
    )
}

由于某种原因，代码出现在控制台上但没有出现在屏幕上。如果有帮助，我也会从 JSON 文件打印。

Answer 1

您没有 return map 中的 DOM。

props.data.map(row => {
    return (
       <tr>
         <td>{row.first_name} {row.last_name}</td>                     
         <td>{row.phone}</td> 
         <td>{row.email}</td>                                           
      </tr>
    )
})

或者准确地说：

props.data.map(row => (
       <tr>
         <td>{row.first_name} {row.last_name}</td>                     
         <td>{row.phone}</td> 
         <td>{row.email}</td>                                           
      </tr>
))

在控制台打印，但不在页面上？

Prints in console, but not in on page?

html

next.js

tailwind-css