三元运算符没有按预期工作

Question

我有一个地图组件，我需要在其中传递来自自定义 useSwr 挂钩的默认坐标。获取数据后，我将它们传递给状态并在值未定义时呈现它。显然我做错了什么并且它无法正常工作，因为即使值未定义也会调用 Map 组件，这导致我收到此错误：

Failed prop type: Invalid prop `center` supplied to `o`.

这是我处理状态的方式：

const {
    locationDetails,
    locationSessions,
    isLoading,
    isError,
  } = useLocations();

  const [mapCenter, setMapCenter] = useState({ lat: null, lng: null });
  useEffect(() => {
    setMapCenter({
      lat: locationDetails?.location_lat,
      lng: locationDetails?.location_lon,
    });
  }, [locationDetails]);

渲染：

{mapCenter?.lat !== undefined &&
                    mapCenter?.lng !== undefined ? (
                      <GoogleMapReact
                        bootstrapURLKeys={{
                          key: "My api key",
                        }}
                        center={mapCenter}
                        zoom={14}
                      >
                        <IconMaps
                          name="PinDefault"
                          width="21px"
                          height="31px"
                          lat={parseFloat(location_lat)}
                          lng={parseFloat(location_lon)}
                        />
                      </GoogleMapReact>
                    ) : null}

Answer 1

所以你是说如果你这样做

{mapCenter?.lat != undefined && // non-strict
                    mapCenter?.lng != undefined ? ( // non-strict
                      <GoogleMapReact
                        bootstrapURLKeys={{
                          key: "My api key",
                        }}
                        center={mapCenter}
                        zoom={14}
                      >
                        <IconMaps
                          name="PinDefault"
                          width="21px"
                          height="31px"
                          lat={parseFloat(location_lat)}
                          lng={parseFloat(location_lon)}
                        />
                      </GoogleMapReact>
                    ) : null}

还是returns地图？尝试返回除null之外的其他内容（例如一段文字，仅用于测试目的），因为我觉得除了三元之外可能还有其他问题。

三元运算符没有按预期工作

Ternary operator doesn't work as expected

reactjs

google-map-react

swr