Reactjs 使用fetchHook的未定义响应

我试图用钩子做一些基本的抓取，但作为响应，我一直没有定义

//钩子

export  const useFetch = (url, initialValue) => {
const [Data, setData] = useState(initialValue);
useEffect(() => {
    const fetchData = async () => {
        const result = await axios(url);
        setData(result);     
    };
    fetchData();    
}, []);
console.log(Data,'data') // undefined
return { Data, setData }

}

//组成部分

  export default function BeerTable() {
  const classes = useStyles();
    const  data =   useFetch(
    "https://api.punkapi.com/v2/beers/"
    );
    const { Beers, setBeers }= useState(data)
    console.log(Beers, 'beers')//undefined
    return (
     //some table
  )
}

在浏览器上调用端点时得到的响应：

 [
  {
    "id": 192,
    "name": "Punk IPA 2007 - 2010",
    "tagline": "Post Modern Classic. Spiky. Tropical. Hoppy.",
    "first_brewed": "04/2007",
    "abv": 6.0,
    "ibu": 60.0,
    "target_fg": 1010.0,
    "target_og": 1056.0,
    "ebc": 17.0,
    "srm": 8.5,
    "ph": 4.4,
    "attenuation_level": 82.14,
    "volume": {
      "value": 20,
      "unit": "liters"
    },
  }
  .....]

---

有什么问题吗？

您正在对数组使用对象分解，因此不会返回任何数据

我不确定您试图对数据做什么，但您可能希望这样循环：

const beerArray=useState（数据）
for（var i=0；i
fetchData
正在异步响应中更新
Data
。但它在完成提取之前返回
Data

同时，在您的组件中，您只分配了一次
数据
。它将通过
useFetch
逻辑并立即获取它返回的未定义的内容。

为了从

useffetch

中获取更改，您需要在组件中设置一个

useffect

，以便在

数据发生更改时进行监视

// component
export default function BeerTable() {
  const [Beers, setBeers] = useState();
  const data = useFetch("htttps://api.punkapi.com/v2/beers/");    

  useEffect(() => {
    setBeers(data.Data);    
    console.log('beers got updated: ' + Beers');
  }, [data.Data]);
}

useFetch（“htttps://api.punkapi.com/v2/beers/）返回未定义，问题来自钩子：/