Map 方法未在 Nextjs 上返回数据

Question

我正在尝试做一个简单的Map Method，数据1,2,3,4,5可以成功显示在console.log中，但没有显示在网站上。

import React from 'react'

export default function secretStashScreen() {
const numbers = [1, 2, 3, 4, 5];
  return (
    <div>
    {numbers.map((number)=>{<div>{number}</div>}) 
    }
    </div>
  )
}

编译后的警告代码：

warn  - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/d
Error: Aborted because ./pages/secret-stash.js is not accepted
Update propagation: ./pages/secret-stash.js -> ./node_modules/next/dist/build/webp    at applyHandler (http://localhost:3000/_next/static/chunks/webpack.js?ts=16572
    at http://localhost:3000/_next/static/chunks/webpack.js?ts=1657263030521:564:2
    at Array.map (<anonymous>)

是不是我做错了什么？

Answer 1

您应该删除map中的括号以返回值

numbers.map((number)=><div>{number}</div>) 

如果你想保留括号，你应该明确地return

numbers.map((number)=>{return <div>{number}</div>}) 

Answer 2

删除您的 {} 括号

{numbers.map((number)=><div>{number}</div>)}