React with Typescript Interface and API calls-CodePudding

I am pretty new to React with TS or web dev in general. I've been struggling on how to design a interface to match up with the data structure from an api call.

Here's the App.tsx file, and url of the fetch call "https://datausa.io/api/data?drilldowns=Nation&measures=Population"

import React from 'react';
import './App.css';

interface OuterModel {
  data: InnerModel[];
  source: object;
}

interface InnerModel {
  idNation: string;
  nation: string;
  idYear: number;
  year: string;
  population: number;
  slugNation: string;
}

function App() {
  const url = "https://datausa.io/api/data?drilldowns=Nation&measures=Population";
  const [data, setData] = React.useState<InnerModel[]>([]);

  function getData(): Promise<InnerModel[]> {
    return fetch(url).then(res => res.json()).then(result => (result as OuterModel).data as InnerModel[]);
  }

  React.useEffect(() => {
    getData().then(item => setData(item));
  }, [])

  return (
  <div>
    <h1>{data.length}</h1>
    <ul>
      {data?.map((item, idx) => <li key={idx}>{item.population}</li>)}
    </ul>
  </div>)
}

export default App;

I suppose the fetch call was successful, as h1 showed the count of array. yet the unordered list is always blank. don't know what the problem is. The interface? The way I used hooks? these no errors in console, but it's just not right.

blank list items

Also, I wonder if I'm doing this the right way. It seems I have to make a call first, say in browser console, to see the structure of returned json, then I can declare an interface for it. I find it a bit awkward. Are there better approaches?

Appreciate any help on this.

CodePudding user response：

On the response of the API, the "P" of the population field is captial, which caused this issue.

One hint that your data has be correctly loaded into memory is already in your screen shot. The value of data.length is 7. Add to the fact that the list has already rendered, but it is empty. ( i.e., the looping logic worked and didn't crash ) which implies that it wasn't able to find the key, and there is where I deduced that there must be some error in your key.

Please use automated tools like https://transform.tools/json-to-typescript to create the interface, doing this manually is correct, but these kind of small errors happens to the best of us.