在 .map 中添加 if 条件后收到错误"Expected an assignment or function call and instead saw an expression" (Reactj

Question

我是 reactjs 中的新内容，我遇到了一个问题，即在 .map 中添加 if 条件后收到错误

我想做的是，如果数据为空，它将返回标记，否则不显示标记

错误：

/src/component/Map.js
Line 47:17:  Expected an assignment or function call and instead saw an expression  no-unused-expressions

return (
<div>
<MapGL
{...viewport}
width="100vw"
height="100vh"
mapStyle="mapbox://styles/mapbox/dark-v10"
onViewportChange={setViewport}
mapboxApiAccessToken={MAPBOX_TOKEN}
>
{Object.keys(sigfox).map(({id, device, lat, lon}) => {
if(lat !== null && lon !== null)
return  
<Marker
key={id}
latitude={lat}
longitude={lon}
>
<div style={{color: "yellow"}}>
{device}
</div>
<div>
<GoLocation style={{color: "pink"}}/>
</div>
</Marker>
return null
}
)}
</MapGL>
</div>
);

请帮忙！非常感谢:)

Answer 1

这是一个错误形式，你 JSX linter，你有两个返回 null，这就是你遇到这个错误的原因，

试试这个：

return (
<div>
<MapGL
{...viewport}
width="100vw"
height="100vh"
mapStyle="mapbox://styles/mapbox/dark-v10"
onViewportChange={setViewport}
mapboxApiAccessToken={MAPBOX_TOKEN}
>
{Object.keys(sigfox).map(({ id, device, lat, lon }) => {
return (lat !== null && lon !== null) ? <Marker key={id} latitude={lat} longitude={lon}>
<div style={{ color: "yellow" }}>{device}</div>
<div>
<GoLocation style={{ color: "pink" }} />
</div>
</Marker>
: null
})}
</MapGL>
</div>
);

Answer 2

试试这个，当你有纬度和经度时，它会显示标记。 您可以根据需要更改条件。

{Object.keys(sigfox).map(({ id, device, lat, lon }) => {
return ilat && lon ? (
<Marker
key={id}
latitude={lat}
longitude={lon}
>
<div style={{color: "yellow"}}>
{device}
</div>
<div>
<GoLocation style={{color: "pink"}}/>
</div>
</Marker>
) 
: null
})}