在React函数中,可以使用useState()钩子来创建一个state变量并对其进行修改,以捕获和更改API值。下面的示例演示如何使用useState()钩子从GitHub API获取仓库数据,并在组件中呈现它们:
import React, { useState, useEffect } from 'react';
function Repositories() {
const [repos, setRepos] = useState([]);
useEffect(() => {
async function getRepos() {
const response = await fetch("https://api.github.com/users/octocat/repos");
const data = await response.json();
setRepos(data);
}
getRepos();
}, []);
return (
Repositories
{repos.map(repo => (
- {repo.name}
))}
);
}
export default Repositories;
在这个例子中,useState()钩子用于创建一个名为“repos”的state变量,并将其初始值设置为空数组[]。useEffect()钩子用于从GitHub API获取数据,并在数据可用时将其设置为“repos”状态。最后,使用JSX在组件中呈现存储在“repos”状态变量中的数据。
上一篇:捕获和显示相同的图像