我有一个Map组件，我一直在使用它来绘制一个React瓣叶Map折线数据。
我希望传单Map的初始中心是纬度和经度数据数组中的第一个位置。我创建了一个函数，根据两个不同的条件设置值。这些条件正确工作，设置的值可以通过控制台的日志看到。但当我的组件最初呈现时，它会导致错误，因为它说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;