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

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

Fiston Emmanuel · Accepted Answer · 2023-01-31 02:05:13Z

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

edited Jan 31, 2023 at 2:05

answered Jan 31, 2023 at 0:54

Fiston Emmanuel

4,9611 gold badge12 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

jack20xx Over a year ago

Thanks for your advice. The error has been fixed, but <Text>Sunrise: {sunriseTime}</Text> has gone maybe because of return null . What problem occurred, and any solutions to fix this?

Fiston Emmanuel Over a year ago

Try console.log(address) I want to see structure of data after fetched from weather API

jack20xx Over a year ago

Where should I put console.log ?

Fiston Emmanuel Over a year ago

Check the solution update. I added it for reference

Fiston Emmanuel Over a year ago

That's great. Glad you figure out.

|

Collectives™ on Stack Overflow

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

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related