после добавления в условие if в .map (Reactjs) получено сообщение об ошибке «Ожидается присваивание или вызов функции и вместо этого увидено выражение»

Question

Я новичок в reactjs, и у меня возникла проблема: я получаю сообщение об ошибке после добавления условия if в .map

, что я хочу сделать, если данные null возвращает маркер, иначе маркер не отображается

ошибка:

/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>

  );

пожалуйста, помогите! спасибо большое :) 1009 *

Answer 1

Попробуйте, он покажет маркер, когда у вас есть широта и долгота. Вы можете изменить условие согласно вашему требованию.

         {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
            })}

Answer 2

Это ошибка, если вы 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>
);