Argument of type 'AxiosResponse<any, any>' is not assignable to parameter of type 'SetStateAction<any[]>' and the data is not being accessed in return

Viewed 45

I have used next js, useEffect and axios to fetch the data from API's endpoint. I want to get the data to be refreshed each second on my website. I have my code here and at the line number 11, it says "const Data: AxiosResponse<any, any> Argument of type 'AxiosResponse<any, any>' is not assignable to parameter of type 'SetStateAction<any[]>'". If this is solved, I am not able to access the data in line 38 and 40 by accesing the particular objects. Please help!!

import axios from 'axios';

import { useRouter } from 'next/router';

import { useState, useEffect } from 'react';

export default function HomeMatch() {

  const [data, setData] = useState([]);

  const getData = async () => {

    try {
      const Data = await axios('http://api.open-notify.org/iss-now.json');
      setData(Data); // set State
      console.log(Data);
    } catch (err) {
      console.error(err.message);
    }
};

  useEffect(() => {

    getData();
    const interval = setInterval(() => {
      getData();
    }, 5000);

    return () => clearInterval(interval);
  }, []); // includes empty dependency array

  return (

    <div className="relative bg-black rounded-xl w-[400px] h-[200px]">
      <div className="py-2 px-5">
        <div className="grid grid-cols-2 text-center justify-between pt-4 text-xl font-bold">
          <p className="text-white uppercase underline-offset-4 decoration-2 decoration-red-600">
            longitude
          </p>
          <p className="text-white uppercase">latitude</p>
        </div>
        <div className="bg-white rounded-xl w-[350px] h-[50px] absolute top-16">
          <div className="flex flex-row items-center justify-center h-full text-xl font-bold gap-14">
            <p className="">{data.data.iss_position.longitude}</p>
            <p>-</p>
            <p className="">{data.data.iss_position.latitude}</p>
          </div>
        </div>
      </div>
    </div>
  );
}
0 Answers
Related