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

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>
    );

CodePudding user response：

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>
  );
};