Почему я не могу получить данные с обьекта?

Question

делаю небольшой пет-проект для себя, когда юзер вводит текст мне необходимо вывести данные которые приходят с сервера но сталкиваюсь с проблемой - эти данные не получается отобразить в разметке, в консоль их вывести получается. Я использую тайпскрипт чтоб типизировать данные обьекта который приходит с сервера. Думаю что загвоздка именно в типизации (возможно где-то допустил ошибку). Потому что этот проект переписал на обычном реакте и все работает без сбоев но хочу разобраться что ж не так в использовании мною тайпскрипта.

Вот код:

function App() {

  const [search, setSearch] = React.useState("");
  const [query, setQuery] = React.useState<string>("steak");
  const [recipes, setRecipes] = React.useState<Welcome["hits"]>([]);

  async function fetchApi() {
    try {
      const response = await axios.get<Welcome>(
        `https://api.edamam.com/search?q=${query}&app_id=${ID}&app_key=${KEY}`
      );
      setRecipes(response.data.hits);
    } catch (e: unknown) {
      console.warn(e);
    }
  }

  console.log(recipes);
  React.useEffect(() => {
    fetchApi();
  }, [query]);

  const gainSearch = (event: React.FormEvent) => {
    event.preventDefault();
    setQuery(search);
    setSearch("");
  };

  const updateSearch = (event: any) => {
    setSearch(event.target.value);
  };
  return <div className="App">{recipes.}</div>;
}

export default App;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Вот мои интерфейсы:

export interface Welcome {
  q: string;
  from: number;
  to: number;
  more: boolean;
  count: number;
  hits: Hit[];
}

export interface Hit {
  recipe: Recipe[];
}

export interface Recipe {
  uri: string;
  label: string;
  image: string;
  source: string;
  url: string;
  shareAs: string;
  yield: number;
  dietLabels: DietLabel[];
  healthLabels: string[];
  cautions: string[];
  ingredientLines: string[];
  ingredients: Ingredient[];
  calories: number;
  totalWeight: number;
  totalTime: number;
  cuisineType: string[];
  mealType: MealType[];
  dishType: string[];
  totalNutrients: { [key: string]: Total };
  totalDaily: { [key: string]: Total };
  digest: Digest[];
}

export enum DietLabel {
  LowCarb = "Low-Carb",
  LowSodium = "Low-Sodium",
}

export interface Digest {
  label: string;
  tag: string;
  schemaOrgTag: SchemaOrgTag | null;
  total: number;
  hasRDI: boolean;
  daily: number;
  unit: Unit;
  sub?: Digest[];
}

export enum SchemaOrgTag {
  CarbohydrateContent = "carbohydrateContent",
  CholesterolContent = "cholesterolContent",
  FatContent = "fatContent",
  FiberContent = "fiberContent",
  ProteinContent = "proteinContent",
  SaturatedFatContent = "saturatedFatContent",
  SodiumContent = "sodiumContent",
  SugarContent = "sugarContent",
  TransFatContent = "transFatContent",
}

export enum Unit {
  Empty = "%",
  G = "g",
  Kcal = "kcal",
  Mg = "mg",
  Μg = "µg",
}

export interface Ingredient {
  text: string;
  quantity: number;
  measure: null | string;
  food: string;
  weight: number;
  foodCategory: string;
  foodId: string;
  image: string;
}

export enum MealType {
  LunchDinner = "lunch/dinner",
}

export interface Total {
  label: string;
  quantity: number;
  unit: Unit;
}

Я много чего уже перепробовал и ни в какую не получается, писал и так :

const [recipes, setRecipes] = React.useState<Welcome["hits"]>([]);

const response = await axios.get<Welcome["hits"]>(
        `https://api.edamam.com/search?q=${query}&app_id=${ID}&app_key=${KEY}`
      );

Я осознаю что мне с сервера приходит корневой обьект и я записываю его setRecipes(response.data) - далее мне нужно записать hits но тс не дает сделать так: setRecipes(response.data.hits).

Только в таком случае у меня выходит записать setRecipes(response.data.hits) когда я от сервера ожидаю просто Welcome а не <Welcome['hits']>:

const [recipes, setRecipes] = React.useState<Welcome["hits"]>([]);

const response = await axios.get<Welcome>(
        `https://api.edamam.com/search?q=${query}&app_id=${ID}&app_key=${KEY}`
      );

Но даже так я не могу вывести ничего в разметку

<div className="App">
      <h1>{recipes.}</h1> // не дает записать ничего, даже пройтись мапом не могу хоть в этой переменной и находится массив с обьектами
    </div>

 {recipes.map((recipe) => (
        {recipe.}
      ))}

Далее дает ошибку: (parameter) recipe: Hit Type 'Hit' is not assignable to type 'ReactNode'.ts(2322) index.d.ts(1373, 9): The expected type comes from property 'children' which is declared here on type 'DetailedHTMLProps<HTMLAttributes, HTMLHeadingElement>'

Вообщем, я в поисках решения этой ошибки провел много времени но отобразить данные так и не смог поэтому прошу вашего совета..

Так же прикрепляю фото того самого обьекта:

БЛОГ НА HUSL

Почему я не могу получить данные с обьекта?

Ответы (0 шт):