React - 未捕获类型错误：无法读取未定义的属性（读取“纬度”）

Question

我正在尝试使用传单库渲染一个显示多个标记的地图，为此我尝试在 localStorage 中存储多个地址，然后将它们取回并使用 array.map 渲染所有标记，但最终这一切控制台中出现三个错误，主行是“react-dom.development.js:22839 Uncaught TypeError: Cannot readproperties of undefined (reading 'lat')”。

地图组件index.tsx:

function Map({positions, center}: MapProps) {
  return (
    <MapContainerStyled center={center} zoom={13}>
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      />
      {
        positions.map(({lat, long}, index) => {
          return ( 
            <MarkerStyled position={[lat, long]} key={index}>
              <PopupStyled>
              </PopupStyled>
            </MarkerStyled>
          )
        })
      }
        <PopupStyled>
        </PopupStyled>
      
    </MapContainerStyled>
  );
}

export {Map};

创建/添加地址到localStorage的功能

function NewStore() {
  const { register, handleSubmit, setValue, reset} = useForm();
  let stores: object[] = [];
  if(localStorage.getItem("stores")){
    stores = JSON.parse(localStorage.getItem("stores") || "{}");
  }

  function onSubmit(data: StoreProps) {
    stores = [...stores, data]
    localStorage.setItem("stores", JSON.stringify(stores))
  }

带有地图渲染的页面：

function StoresMap () {

  const [stores, setStores] = useState<StoreProps[]>([])

  useEffect(() => {
    const load = async() => {
    const response = await localStorage.getItem("stores");
    setStores(JSON.parse(response!))
    }
    load()
  }, [])
  
  if(stores?.length == 0) {
    return (
      <>
      <h1>Nenhuma loja foi registrada ainda.</h1>
      <a style={{color: 'blue'}} href="/cadastro-farmacia">Clique aqui</a> para registrar uma loja.
      </>
    )
  }

  return (
    <>
      <Map positions={stores} center={[stores[0].lat, stores[0].long]}/>
    </>
  )
}

export {StoresMap}

控制台错误：

react-dom.development.js:22839 Uncaught TypeError: Cannot read properties of undefined (reading 'lat')
    at Object.project (Projection.SphericalMercator.js:24:43)
    at Object.latLngToPoint (CRS.js:28:40)
    at NewClass.project (Map.js:982:27)
    at NewClass.latLngToLayerPoint (Map.js:1004:29)
    at NewClass._updatePosition (DivOverlay.js:298:23)
    at NewClass.update (DivOverlay.js:189:8)
    at NewClass.onAdd (DivOverlay.js:113:8)
    at NewClass.onAdd (Popup.js:135:30)
    at NewClass._layerAdd (Layer.js:114:8)
    at NewClass.whenReady (Map.js:1477:13)
project @ Projection.SphericalMercator.js:24
latLngToPoint @ CRS.js:28
project @ Map.js:982
latLngToLayerPoint @ Map.js:1004
_updatePosition @ DivOverlay.js:298
update @ DivOverlay.js:189
onAdd @ DivOverlay.js:113
onAdd @ Popup.js:135
_layerAdd @ Layer.js:114
whenReady @ Map.js:1477
addLayer @ Layer.js:172
openOn @ DivOverlay.js:63
openOn @ Popup.js:131
addPopup @ Popup.js:30
commitHookEffectListMount @ react-dom.development.js:23150
commitPassiveMountOnFiber @ react-dom.development.js:24926
commitPassiveMountEffects_complete @ react-dom.development.js:24891
commitPassiveMountEffects_begin @ react-dom.development.js:24878
commitPassiveMountEffects @ react-dom.development.js:24866
flushPassiveEffectsImpl @ react-dom.development.js:27039
flushPassiveEffects @ react-dom.development.js:26984
commitRootImpl @ react-dom.development.js:26935
commitRoot @ react-dom.development.js:26682
performSyncWorkOnRoot @ react-dom.development.js:26117
flushSyncCallbacks @ react-dom.development.js:12042
commitRootImpl @ react-dom.development.js:26959
commitRoot @ react-dom.development.js:26682
finishConcurrentRender @ react-dom.development.js:25981
performConcurrentWorkOnRoot @ react-dom.development.js:25809
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533

我尝试过处理所有的打字错误等等，但最终它没有改变。

Answer 1

请显示您在 localStorage 中的“商店”是什么。您可以通过 console.log 来查看某些项目是否未定义。

另外，我建议您在涉及 localStorage 的任何操作中使用 try-catch 语句。