时间戳

首页 > 解决方案 > 在反应中围绕地图制作包装器功能

javascript - 在反应中围绕地图制作包装器功能

问题描述

我正在尝试在我的map函数中添加一个参数以做出反应。但是在我将它包装在另一个函数中之后，返回值变为空（至少在我使用 调试时console.log(marker(NATURAL_EVENT_WILDFIRE) == null)）。

const markers = eventData.map((ev, index) => {
        if(ev.categories[0].id === NATURAL_EVENT_WILDFIRE) {
            return <LocationMarker key={index} lat={ev.geometries[0].coordinates[1]} lng={ev.geometries[0].coordinates[0]} onClick={() => setLocationInfo({ id: ev.id, title: ev.title })} />
        }
        return null
    })

我想把上面的函数变成下面这样，我可以将 id 指定为变量。

function marker(idx) {eventData.map((ev, index) => {
        if(ev.categories[0].id === idx) {
            console.log(ev);
            return <LocationMarker key = {index} lat={ev.geometries[0].coordinates[1]} lng={ev.geometries[0].coordinates[0]} onClick={() => {
                setLocationInfo({ id: ev.id, title: ev.title });
                //support for toggle away info box
                setInfoBox(!infoBox);
            }} />
        }
        return null
    })}

该元素部署为：

{markers} //no problem
{marker(NATURAL_EVENT_WILDFIRE)} //doesn't render

您可以在此处查看代码库

标签： javascriptreactjs

解决方案

您省略了在函数中添加return语句marker

您应该添加marker到函数或将marker函数转换为箭头一。

一般功能

function marker(idx) {
    return eventData.map((ev, index) => {
        if(ev.categories[0].id === idx) {
            console.log(ev);
            return <LocationMarker key = {index} lat={ev.geometries[0].coordinates[1]} lng={ev.geometries[0].coordinates[0]} onClick={() => {
                setLocationInfo({ id: ev.id, title: ev.title });
                //support for toggle away info box
                setInfoBox(!infoBox);
            }} />
        }
        return null
    })
}

箭头功能

const marker = (idx) => eventData.map((ev, index) => {
    if(ev.categories[0].id === idx) {
        console.log(ev);
        return <LocationMarker key = {index} lat={ev.geometries[0].coordinates[1]} lng={ev.geometries[0].coordinates[0]} onClick={() => {
            setLocationInfo({ id: ev.id, title: ev.title });
            //support for toggle away info box
            setInfoBox(!infoBox);
        }} />
    }
    return null
});

推荐阅读