如何在组件中使用Hooks

Question

我在Reactjs(nextjs)工作，我正在尝试使用"钩子"在功能组件中现在我正试图通过api获取数据，但我得到以下错误

TypeError: Trending is undefined

这是我的代码，我错在哪里?

import Axios from "axios";
import { useRouter } from "next/router";
import Link from "next/link";
const Trending = ({ Trending }) => {
const router = useRouter();
console.log({ Trending });
if (router.isFallback) {
return <div>Loading...</div>;
}
return (
<>
<section>
<div className="container Blog_page_sidebar">
<div className="blog_details">
<div className="blog_image">{Trending.title}</div>
<div className="blog_heading"></div>
<div className="blog_detail"></div>
</div>
</div>
</section>
</>
);
};
export default Trending;
export const getStaticProps = async () => {
const { data } = await Axios.get(
`https://myurl/blogs`
);
const Trending = data;
return {
props: {
Trending,
},
};
};

Answer 1

如果你想在useEffect中调用API

useEffect(() => {
const getData = async() => {
try {
const data = await axios.get(`https://myurl/blogs`);
console.log('data is = ' , data);
setData(data)
}catch(err) {
console.log(err);
}
}
//call the inner function inside useEffect
getData();
)} ,[])