时间戳

首页 > 解决方案 > 将类型设置为传入的apiye状态

reactjs - 将类型设置为传入的apiye状态

问题描述

我想将传入的 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

标签： reactjstypescriptapi

解决方案

尝试这个

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;

推荐阅读