Reactjs 三值运算符不'；I don’我没有按预期工作

我有一个地图组件，我需要在其中传递来自自定义useSwr钩子的默认坐标。在获取数据之后，我将它们传递给状态，如果值未定义或未定义，则呈现它。显然，我做了一些错误的事情，但它不能正常工作，因为即使在值未定义的情况下也会调用Map component，这导致我出现以下错误：

失败的道具类型：为'o'提供的道具'center'无效。

这是我处理状态的方式：

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}                     
                      

{mapCenter？.lat！==未定义&&
地图中心？.lng！==未定义(
)：null}

那么你是说如果你这样做

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

{mapCenter？.lat！=未定义&&//非严格
mapCenter？.lng！=未定义？（//非严格
)：null}

---

它仍然返回地图？尝试返回除

null

之外的其他内容（比如一段文本，仅用于测试目的），因为我觉得在

useffect

中可能存在三元之外的其他问题。

null===undefined

是

false

，

null==undefined

是true:），即使

locationDetails

为

null

，也会更新状态，然后设置

lat=null

和

lng=null

。在渲染函数中，由于严格的类型检查（

！=

），您可以检查它是否是

未定义的

，而不是

空的

）。检查空值或进行非严格比较（

！=

）谢谢您的评论。我尝试了两种建议的解决方案，但都没有改变任何事情。仍然存在与以前相同的问题。即使lang和lat设置为null，也要执行第一个表达式吗？@Prathameskoshti不是真的，如果lat和lng值存在，我要执行map。这也会在不渲染文本的情况下引发相同的错误，可以认为这可能是因为mapCenter.lat在开始时设置为null。我已将比较更改为

mapCenter？.lat！=未定义| |地图中心？.lat！=null

也没有改变任何内容。请在渲染地图时记录

mapCenter

的值（将在抛出错误之前）。非常感谢。这帮助我看到了我的错误，很明显，这些值是以字符串的形式返回的，应该以数字的形式传递。我的错误是没有将其转换为数字：）我进入了这个库的文档，不明白会发生什么，很高兴你设法解决了这个问题：）