Почему я получаю undefined?

Question

[webjun]

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

Пример кода:

const[recipes, setRecipes] = React.useState<Irecipe>();

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

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

Вот так я написал интерфейсы:

export interface IfetchApi{
config?: any,
headers?:any,
data: Idata[],
request?: number,
statusText?: string

}

export interface Idata {
count: number,
from: number,
hits: Irecipe,
more: boolean,
q: string,
}

export interface Irecipe{
calories: number,
cautions: any,
cuisineType: Array,
dietLabels: Array,
dishType: any,
healthLabels?: any,
image: string,
ingredientLines: Array,
ingredients: Iingredients[],
label: string,
mealType: Array,
shareAs: string,
source: string,
totalDaily: any,
totalNutrients: any,
totalTime: number,
totalWeight: number,
uri: string,
url: string,
yield: number
}

export interface Iingredients{
text: string,
quantity: number,
measure: string
}

Прикрепляю фото обьекта который получаю:





Например когда я выведу в консоль: console.log(recipes) то получу обьект который прикрепил выше но когда я хочу получить более детальные данные console.log(recipes?.dishType) то получаю undefined .. В чем моя ошибка? Подозреваю что в описании типов

Comments

[WbICHA]

А ты пробовал для начала сравнить данные, которые ты получаешь, и интерфейс, который ты прописал? Нет? Тогда вперёд. Да? Тогда сравнивай до тех пор, пока не поймёшь.

Answer 1

[Aetae]

Ну в комменте уже ответили, что приходит тебе не совсем то, что ты там в типе написал.
Рекомендую не писать руками интерфейсы для готового json, лучше тыкнуть в консоли на ответе "Copy object" и вставь в любой конвертер, который гуглится по "json to ts", например https://app.quicktype.io/. Так ты точно не ошибёшься, а потом уже можешь уточнить тип руками.

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

Comments

[webjun]

Да, действительно, конвертеры сильно облегчают жизнь, спасибо. Но даже с готовыми из конвертера интерфейсами - я получаю undefined

[webjun]

Опять же, если мои типы были описаны с ошибками то почему тс давал подсказки к ключам? После конвертера тоже самое, обращаюсь к ключам а их значение - undefined..)

[Aetae]

webjun, после console.log(recipes) добавь console.log(recipes.hits[0].recipe.dishType). Если на это будет ругаться typescript значит ты таки неправильно указал типы. Если будет выводить undefined - значит скриншоты врут.)

[Aetae]

webjun, тайпскрипт даёт подсказки по тем типам которые описаны. Он ничего не знает о том, что там приходит с сервера, кроме того, что ты ему сам рассказал: он работает на этапе компиляции, а ответ от сервера приходит на этапе исполнения, когда никакого тайпскрипта уже давно нет, а есть только чистый js.

[webjun]

Aetae, большое спасибо за прояснение

[webjun]

Aetae, хорошо, а почему я не могу дальше полученный обьект пройти мапом чтоб далее вывести данные динамически ?

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


  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);
      console.log(recipes?.hits[0].recipe.calories) //Тут данные с обьекта выводятся
    }catch(e: unknown){
      console.warn(e);
    }
  }

  
  
  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.map((recipe:Welcome) => {
        <Recipe key={recipe.hits}/> //Здесь уже получаю ошибку <blockquote>Object is possibly 'undefined'.</blockquote>
      })}
    </div>
  );
}

export default App;

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

[Aetae]

webjun, ты в setRecipes всё ещё кладёшь response.data, в response.data у тебя весь ответ от сервера. Это не массив, а объект, вот этот:
Ты не можешь map'ом пройтись по объекту.

Это раз.

recipes - может быть undefined, потому что тут

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

не задал значение по умолчанию: useState() условно то же самое, что useState(undefined), а значит у тебя в recipes лежит undefined до тех пока не придёт ответ от сервера. А ответ от сервера может прийти через сто лет, к тому времени компонент уже нарисовался и recipes.map был вызван, т.е. undefined.map, а это ошибка и падение скрипта. TS не даёт тебе этого сделать. Ты должен либо добавить проверку, что recipes существует, либо задать значение по умолчанию, например пустой массив.

Это два.

В общем TypeScript - тебе друг, а не враг, он заранее не даёт тебе сделать глупые ошибки которые без него всё равно свалят твое приложение, но уже во время работы. Смотри какие он тебе подсказки выдаёт, и что он тебе пишет, он это делает не от желания поболтать.

[webjun]

Aetae, Спасибо большое, буду разбираться)

[webjun]

Aetae, заранее сори за отнятое время, просто хочется разобраться..

Я уже пробовал положить пустой массив в обьект

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

Сразу же ловлю ошибку

Argument of type 'never[]' is not assignable to parameter of type 'Welcome | (() => Welcome)'

Затем вроде исправил ошибку и дописал массив в дженерик:

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


  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);
      console.log(recipes)
    }catch(e: unknown){
      console.warn(e);
    }
  }

В консоли получаю пустой массив - значит данные с сервера я не получаю.

Далее я пробую дженерик

const[recipes, setRecipes] = React.useState<Irecipe[]>([]);


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

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

Вот такая трясина, где-то же есть моя ошибка..

[Aetae]

webjun, твоя ошибка в непонимании, что вообще тебе приходит(или вообще в базовом умении работать с объектами в javascript), а также непонимании как работает React.

1. Тебе уже неоднократно сказали(не только я), что в responce.data у тебя корневой объект ответа, а не массив. Не массив. Не. Массив.
Если ты хочешь положить в setRecipes массив hits, то и клади туда, блин, массив hits: setRecipes(response.data.hits).

2. setRecipes не меняет магически на лету recipes, он обновляет state(состояние) компонента. Поэтому функция и называется useState, а не как-то ещё.
Что при этом происходит, ты должен был прочитать в мануале к реакту, однако если упростить, то тупо будет повторно вызвана эта функция(компонент) которая отрисует компонент заново, и уже при этом, повторном вызове, значение recipes будет тем которое ты установил.
Т.е. порядок действий происходящий у тебя:
1. Отрисовывается компонент с recipes пустым массивом, создаётся функция fetchApi в которую замыкается пустой recipes.
2. После отрисовки срабатывает useEffect и вызывает функцию fetchApi.
3. Какое-то время ничего не происходит, пока идёт запрос к серверу.
4. Пришёл ответ от сервера, он отправляется в setRecipes, выводится console.log с запомненным пустым recipes.
5. setRecipes инициирует повторную отрисовка компонента(повторный вызов функции-компонента), при которой в recipes уже лежит то, что туда положили на предыдущем шаге. После отрисовки useEffect не срабатывает, т.к. query не менялся.

[webjun]

Aetae, я понимаю что мне в responce.data приходит корневой объект ответа.

Если ты хочешь положить в setRecipes массив hits, то и клади туда, блин, массив hits: setRecipes(response.data.hits).

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

Property 'hits' does not exist on type 'Ingredient[]'

, подставлял абсолютно все интерфейсы и везде одни и та же ошибка.
Я переписал проект на обычном реакте и все работает.

[Aetae]

webjun, он может написать тебе

Property 'hits' does not exist on type 'Ingredient[]'

только если ты сам напишешь вот так await axios.get<Ingredient[]>.... Т.е. ты прямым текстом говоришь typescript'у, что в ответе сервера ждёшь МАССИВ Ingredient[], а не объект, имеющий поле hits, а потом удивляешься, что он тебе об этом прямо говорит.

На обычном js ты можешь писать пет-проекты, но в достойной конторе ты никуда от typescript'а не убежишь, так что лучше начинай вникать пораньше. Хотя если у тебя нет бэкгранунда чистого javascript то в принцпе от того что ты на нём некоторое время по-пишешь будет и к лучшему. Зато потом, хорошенько походив по граблям, сразу проникнешься удобством typescript'a.)

[webjun]

Aetae, я сейчас на этапе изучения тайпсрипта и стараюсь делать пет-проекты в двух вариантах - на обычном js и переписывать на тс)
Честно говоря впервые так долго решаю проблему вывода данных с сервера..

Решил ради интереса попробовать без аксиоса:

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

  const fetchApi = () => {
    try {
      fetch(
        `https://api.edamam.com/search?q=${query}&app_id=${ID}&app_key=${KEY}`
      )
        .then((res) => res.json())
        .then((data) => setRecipes(data.hits));
    } catch (e) {
      console.log(e);
    }
  };
  console.log(recipes);

Теперь я в коносоли имею доступ к массиву

hits

который состоит из нескольких обьектов но я не могу по-нему пробежаться мапом..

Теперь с аксиосом (я понимаю что от способа получения данных мало что меняется но все же)

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

  async function fetchApi() {
    try {
      const response = await axios.get<Welcome["hits"]>(
        `https://api.edamam.com/search?q=${query}&app_id=${ID}&app_key=${KEY}`
      );
      setRecipes(response.data);  //hits не дает записать, <blockquote>Property 'hits' does not exist on type 'Hit[]'</blockquote>
      console.log(recipes);
    } catch (e: unknown) {
      console.warn(e);
    }
  }

только если ты сам напишешь вот так await axios.get.... Т.е. ты прямым текстом говоришь typescript'у, что в ответе сервера ждёшь МАССИВ Ingredient[], а не объект, имеющий поле hits, а потом удивляешься, что он тебе об этом прямо говорит.

- выходит что моя новая запись

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

тоже неверная тк как я тут тоже ожидаю массив а должен ожидать обьект. Смотрел документацию и некоторые туториалы и там получение данных происходит примерно так же как я и написал. Может дело в типах ?
https://codepen.io/IvaLu/pen/bGMqVKj?editors=0010

[Aetae]

Ты ожидаешь что axios(сервер) тебе вернёт Welcome, а не Welcome['hits'], потому так и пиши:

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

А вот в setRecipes ты уже хочешь положить именно Welcome['hits'] а не весь Welcome, потому тоже так и пиши

React.useState<Welcome["hits"]>([])
// ...
  setRecipes(response.data.hits)

По сути дженерик у axios просто устанавливает какой тип будет у response.data.

[webjun]

Aetae, сделал как вы и сказали:

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.map((recipe) => (
        <Recipe
          key={recipe.recipe.label}
          title={recipe.recipe.label}
          image={recipe.recipe.image}
          calories={recipe.recipe.calories}
          ingredients={recipe.recipe.ingredients}
        />
      ))}
    </div>
  );
}

Получаю ошибки:

(property) title: any
Type '{ key: any; title: any; image: any; calories: any; ingredients: any; }' is not assignable to type 'IntrinsicAttributes'.
Property 'title' does not exist on type 'IntrinsicAttributes'.

Странно что в консоли мой массив рецептов есть а отобразить в разметке не могу..

[Aetae]

webjun, тип не верный:

export interface Hit {
  recipe: Recipe[];
}

->

export interface Hit {
  recipe: Recipe;
}

У тебя же там единичная запись, а не массив. О чём typescript тебе явно в ошибкеах и пишет.

Яж сказал воспользоваться генераторром. Руками ты можешь что угодно накосорезить.

По второй ошибке: у тебя есть тип Recipe и компонент Recipe, они конфликтуют скорее всего. Также возможно сам компонент Recipe не типизирован, т.е. ts не знает какие пропсы он принимает, а какие нет.
Сам текст ошибки говорит буквально "<список переданных пропсов> нельзя назначить в <стандартные атрибуты для React-комонента>, пропс title отсутствует в <стандартные атрибуты для React-комонента>".

[webjun]

Aetae, странно, компонент я типизировал. Вот даже если банально проверить вывод данных без компонента с пропсами - я так же получаю ошибки:

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.map((recipe) => {
        <h2>{recipe.recipe.calories}</h2>;  //не отображается
      })}
    </div>
  );
}

export default App;

Ошибка:

const recipes: Hit[]
Type 'void[]' is not assignable to type 'ReactNode'.
Type 'void[]' is not assignable to type 'ReactFragment'.
The types returned by '[Symbol.iterator]().next(...)' are incompatible between these types.
Type 'IteratorResult' is not assignable to type 'IteratorResult'.
Type 'IteratorYieldResult' is not assignable to type 'IteratorResult'.
Type 'IteratorYieldResult' is not assignable to type 'IteratorYieldResult'.
Type 'void' is not assignable to type 'ReactNode'.

К примеру я типизирую "recipe" как any - все ошибки исчезают но на странице ничего не отображается:

<div className="App">
      {recipes.map((recipe): any => {
        <h2>{recipe.recipe.calories}</h2>;
      })}
    </div>

Вариант с пропсом:

<div className="App">
      {recipes.map((recipe) => {
        <Recipe
          key={recipe.recipe.label}
          image={recipe.recipe.image}
          calories={recipe.recipe.calories}
          ingredients={recipe.recipe.ingredients}
        />;
      })}
    </div>

Сам компонент:

import React from "react";

interface IProps {
  label: string;
  image: string;
  calories: number;
  ingredients: Array<any>;
}

export default function Recipe({
  label,
  image,
  calories,
  ingredients,
}: IProps) {
  return <h1>{calories}</h1>;
}

[Aetae]

webjun,
Ошибка базового синтаксиса js. Если в квадратных скобках функции нет return - она ничего и не возвращает. React в этом плане ничего не меняет.

recipes.map((recipe) => {
  <h2>{recipe.recipe.calories}</h2>;  //не отображается
})

->

recipes.map((recipe) => {
  return (<h2>{recipe.recipe.calories}</h2>);  
})

или

recipes.map((recipe) => (
  <h2>{recipe.recipe.calories}</h2>;  
))

P.S. Круглые скобки можно опустить, но при работе с React считаестя хорошим тоном заключать jsx разметку в скобки.