React Native with API, Error: undefined is not an object - react-native

Question

I'M trying to use Weather API with React Native, but the error below occurred.
It seems that a problem is that const is used before getAdressData done.
How can I use const in this case and fix this error?
Error
undefined is not an object (evaluating 'whether.sys.sunrise')
Codes
〜〜〜〜〜〜〜〜〜〜
export const AddressScreen = () => {
const [address, setAddress] = useState('');
const baseURL = `${APIKey}`
const getAddressData = () => {
axios.get(baseURL)
.then((response) => {setAddress(response.data)})
.catch(error => console.log(error))
};
const sunrise = new Date(weather.sys.sunrise * 1000); //Error
const sunriseTime = sunrise.toLocaleTimeString();
return (
<KeyboardAvoidingView>
〜〜〜〜〜〜〜〜
<View>
<Text>
Sunrise: {(sunriseTime)}
</Text>
</View>
</KeyboardAvoidingView>
);

Answer 1

The JavaScript compiler error is clear with the error. you are trying to access weather.sys.sunrise object property but not defined/initialized.
It seems that you are trying to fetch weather information of a specific location. If that is the intention of your code.
Refactor code as below :
export const AddressScreen = () => {
const [address, setAddress] = useState(null);
const baseURL = `${APIKey}`;
console.log("Fetched weather data:",address)
const getAddressData = () => {
axios
.get(baseURL)
.then((response) => {
console.log("Server response:",response)
setAddress(response.data);
})
.catch((error) => console.log(error));
};
useEffect(() => {
getAddressData();
}, []);
// Don't access weather data until fetched and assigned to state value.
if (!address?.sys) return null;
const sunrise = new Date(address.sys.sunrise * 1000);
const sunriseTime = sunrise.toLocaleTimeString();
return (
<KeyboardAvoidingView>
<View>
<Text>Sunrise: {sunriseTime}</Text>
</View>
</KeyboardAvoidingView>
);
};