当某些值发生变化时如何重新加载映射组件

Question

我有一个组件，根据传递的Lat和Lng加载谷歌地图，但是当我改变这个值时，我需要地图在屏幕上呈现

const [getLat, setGetLat] = useState(geoLocation.mapsLat);
const [getLng, setGetLng] = useState(geoLocation.mapsLng);
const loadMap = getLat && getLng;

useEffect((previousValue) => {
const { zipCode } = formValues;
if (zipCode !== previousValue) {
console.log('need reload the map');
}
},
[ ]
);

当它发生在console.log中时，我如何渲染我的代码的这个固定部分?

return (
{loadMap && (
<div className="container">
<label>Map</label>
<Map lat={getLat} lng={getLng} handleClick={handleSubmit} />
</div>
)}
)

Answer 1

const [getLat, setGetLat] = useState(geoLocation.mapsLat);
const [getLng, setGetLng] = useState(geoLocation.mapsLng);

useEffect((previousValue) => {
const { zipCode } = formValues;
setGetLat(geoLocation.mapsLat);
setGetLng(geoLocation.mapsLng);
},[geoLocation.mapsLat,geoLocation.mapsLng]);

return (
{getLat && getLng && (
<div className="container">
<label>Map</label>
<Map lat={getLat} lng={getLng} handleClick={handleSubmit} />
</div>
)}
)

以上代码必须解决您的问题。当你的zipCode值改变时，组件将呈现，你的ui将被更新。