如何确保数据在初始渲染之前不是未定义的？

Question

我有一个地图组件，我一直在使用它来绘制反应传单地图上的折线数据。

我希望传单地图的初始中心是经纬度数据数组中的第一个位置。我创建了一个函数来根据两种不同的条件设置值，这些条件可以正确地工作，可以通过控制台的日志看到设置的值。但是当我的组件最初渲染时，它会导致一个错误，因为它说initialPositionLat和initialPositionLong是未定义的。

我尝试使用useEffect来设置值，但我不确定如何确保initialPositionLat和initialPositionLong在组件渲染之前从函数设置。有人知道我哪里出错了吗?

map组件:

function Mapp(props) {
const [isLoading, setIsLoading] = useState(true)
useEffect(() => {
setInitPosition(props);
setIsLoading(false);
},[]);
let initialPositionLat;
let initialPositionLong;
function setInitPosition(props) {
if(!Array.isArray(props.activityData)) {
console.log("first if positions = ", props.activityData.positions[0][1])
initialPositionLat = props.activityData.positions[0][0];
initialPositionLong = props.activityData.positions[0][1];

}
else {
console.log("2nd if positons = ", props.activityData.polylines.positions)
initialPositionLat = props.activityData.poylines.positions[0][0];
initialPositionLong = props.activityData.poylines.positions[0][1]
}
//console.log("initial position = ", [initialPositionLat, initialPositionLong]);
}

return !isLoading ? (
<MapContainer center={[initialPositionLat, initialPositionLong]} zoom={15} scrollWheelZoom={false}>
<TileLayer attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>

{!Array.isArray(props.activityData) && <Polyline positions={props.activityData.positions} >
</Polyline>
}
{Array.isArray(props.activityData.polylines) && props.activityData.polylines.length > 1 && 

props.activityData.polylines.map((activity, idx) => (
<Polyline key={idx} positions={activity.positions} 
</Polyline>
))}

</MapContainer>
) : (
<div>
<p>Loading...</p>
</div>
)
}

export default Mapp;

Answer 1

你可以这样做，

<MapContainer center={getInitPosition()} zoom={15} scrollWheelZoom={false}>

和改变功能，

function getInitPosition() {
if(!Array.isArray(props.activityData)) {
console.log("first if positions = ", props.activityData.positions[0][1])
return [props.activityData.positions[0][0],props.activityData.positions[0][1]];

}
else {
console.log("2nd if positons = ", props.activityData.polylines.positions)
return [props.activityData.poylines.positions[0][0],props.activityData.poylines.positions[0][1]];
}
//console.log("initial position = ", [initialPositionLat, initialPositionLong]);
}