Блог

Главная - Вопросы по программированию - Установка типа в состояние входящего apiye

Установка типа в состояние входящего apiye

#reactjs #typescript #api

Вопрос:

Я хочу присвоить входящему API статус, но в нем написано «не определено». Я хочу отбросить свои данные, поступающие в randomcocktail, а затем использовать их.

Случайный.tsx

     import { useState, useEffect } from "react";
import { CocktailType } from "../Utils/data";
import "../Style/index.scss";

    const Random = () => {
  const [randomCocktail, setRandomCocktail] = useState<CocktailType[]>();



useEffect(() => {
    const getRand = async () => {
      const response = await fetch(
        "https://www.thecocktaildb.com/api/json/v1/1/random.php"
      );
      const data = await response.json();
      const { cocktail = [] } = data;

      setRandomCocktail(cocktail[0]);
      console.log(data);
      console.log(randomCocktail);
    };
    getRand();
  }, []);



 return (
    <div className="randomPage">
      <div className="leftRand"></div>
      <div className="rightRand"></div>
    </div>
  );
};
export default Random;

данные.ts

 export type CocktailType={
strDrink :string;
strTag:string|null;
strVideo:string|null;
strCategory:string;
strIBA:string|null;
strAlcoholic:string;
strGlass:string;
strInstructions:string;
strDrinkThumb:string;

}

api : https://www.thecocktaildb.com/api/json/v1/1/random.php

Комментарии:

1. Не могли бы вы подробнее остановиться на самом вопросе? Вы получаете какие — либо конкретные ошибки?

2. В ответе api, похоже, нет cocktail поля. В этом может быть проблема?

Ответ №1:

Попробуйте это

 import { useState, useEffect } from "react";
import { CocktailType } from "../Utils/data";
import "../Style/index.scss";

    const Random = () => {
  const [randomCocktail, setRandomCocktail] = useState<CocktailType[]>();



useEffect(() => {
    const getRand = async () => {
      const response = await fetch(
        "https://www.thecocktaildb.com/api/json/v1/1/random.php"
      );
      const data = await response.json();
      const cocktail = data.drinks;

      setRandomCocktail(cocktail[0]);
      console.log(data);
      console.log(randomCocktail);
    };
    getRand();
  }, []);



 return (
    <div className="randomPage">
      <div className="leftRand"></div>
      <div className="rightRand"></div>
    </div>
  );
};
export default Random;
Метки: