Next.js 14中Leaflet动态添加Marker无法显示的问题求助

我正在学习Next.js 14，用npx create-next-app@latest创建了新项目，目标是做一个展示基础数据的Leaflet地图应用，参考了next-leaflet-starter的组件适配到项目中。

尝试实现动态添加地图标记（Marker）时，参考旧版Next.js的方案，把Marker存入React状态变量再遍历渲染。控制台日志显示逻辑没问题，但动态添加的Marker就是不显示。

以下是page.jsx代码：

"use client"

import { Button } from '@/components/ui/button'
import Map from '@components/Map';
import React from 'react';

const DEFAULT_CENTER = [38.907132, -77.036546]

export default function Home() {
  const [mapMarkers, setMapMarkers] = React.useState([[]])
  function doSomethingFun() {
    console.log("Start State ", mapMarkers)
    setMapMarkers([DEFAULT_CENTER])
  }

  return (
    <>
      <Map className="mapcomponent" width="800" height="400" center={DEFAULT_CENTER} zoom={13}>
        {({ TileLayer, Marker, Popup }) => (
          <>
            <TileLayer
              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
              attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
            />

            <Marker position={[DEFAULT_CENTER[0] + 0.01, DEFAULT_CENTER[1] + 0.01]}>
              <Popup>
                A dynamically added marker and popup.
              </Popup>
            </Marker>
            {
              mapMarkers.map((latlng) => {
                if (latlng !== null) {
                  console.log("In map", latlng);
                  <Marker position={latlng}>
                    <Popup>
                      This popup should be offset from the dynamically drawn one.
                    </Popup>
                  </Marker>
                }
              })
            }
          </>
        )}
      </Map >
      <p>Hello.</p>
      <Button onClick={doSomethingFun}>Do something fun.</Button>

    </>
  )
}

问题出在三个核心点：

• map遍历未返回JSX组件：mapMarkers.map的回调函数里，你仅定义了<Marker>组件但未用return返回，React无法识别需要渲染的元素。
• 初始状态设置不合理：useState([[]])初始化了一个包含空数组的数组，导致初始渲染时会遍历空数组，引发无效判断逻辑。
• 缺少key属性：React列表渲染要求每个元素有唯一key，用于识别元素变化、优化渲染性能。

修改后的代码如下：

"use client"

import { Button } from '@/components/ui/button'
import Map from '@components/Map';
import React from 'react';

const DEFAULT_CENTER = [38.907132, -77.036546]

export default function Home() {
  // 初始化为空数组，避免不必要的空数组遍历
  const [mapMarkers, setMapMarkers] = React.useState([])
  
  function doSomethingFun() {
    console.log("Start State ", mapMarkers)
    // 用扩展运算符保留原有标记，实现累加添加（若需替换可保留原setMapMarkers写法）
    setMapMarkers(prev => [...prev, DEFAULT_CENTER])
  }

  return (
    <>
      <Map className="mapcomponent" width="800" height="400" center={DEFAULT_CENTER} zoom={13}>
        {({ TileLayer, Marker, Popup }) => (
          <>
            <TileLayer
              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
              attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
            />

            <Marker position={[DEFAULT_CENTER[0] + 0.01, DEFAULT_CENTER[1] + 0.01]}>
              <Popup>
                A dynamically added marker and popup.
              </Popup>
            </Marker>
            {
              mapMarkers.map((latlng, index) => {
                // 显式返回Marker组件，同时添加唯一key
                return (
                  <Marker key={index} position={latlng}>
                    <Popup>
                      This popup should be offset from the dynamically drawn one.
                    </Popup>
                  </Marker>
                )
              })
            }
          </>
        )}
      </Map >
      <p>Hello.</p>
      <Button onClick={doSomethingFun}>Do something fun.</Button>

    </>
  )
}

说明：

1. 初始状态改为空数组[]，避免初始渲染时的无效遍历。
2. 在map回调中通过return显式返回组件，也可改用括号包裹箭头函数实现隐式返回。
3. 添加key={index}（若有业务唯一ID，建议用ID替代index），符合React列表渲染规范。
4. 调整setMapMarkers逻辑为累加模式，若需要每次点击替换所有标记，可保留原setMapMarkers([DEFAULT_CENTER])写法。

内容的提问来源于stack exchange，提问作者Tim AtLee