使用Typescript将响应从GitHub API映射到React.js

Question

我正在使用axios 对github api提出请求

api.github.com/users/fariasmateuss/repos

我试着绘制数据

interface RepositoryProps {
full_name: string;
description: string;
html_url: string;
stargazers_count: number;
forks_count: number;
}
const Repository: React.FC = () => {
const [repo, setRepo] = useState<RepositoryProps | null>(null);
useEffect(() => {
async function fetchRepositoryData(): Promise<void> {
const { data } = await api.get<RepositoryProps>(
'/users/fariasmateuss/repos',
);
setRepo(data);
}
fetchRepositoryData();
}, []);
return (
<div className="wrapper">
{repo.map(repositories => (
<div key={repositories.id} className="repo">
<div className="top-side">
<header className="header-repo">
<RiBookMarkLine className="icon-repo" />
<Link className="anchor-repo" to="/">
{repositories.full_name}
</Link>
</header>
<p className="description">{repositories.description}</p>
</div>
<div>
<ul className="bottom-side">
<li className="icon-wrap">
<RiStarLine className="icon-repo" />
<span className="stars">{repositories.stargazers_count}</span>
</li>
<li className="icon-wrap">
<AiOutlineFork className="icon-repo" />
<span className="forks">{repositories.stargazers_count}</span>
</li>
</ul>
</div>
</div>
))}
</div>
);
};
export default Repository;

但是，它返回低于的错误

const-reo:RepositoryProps|null对象可能是"null">

和

(参数(存储库：任何参数"存储库"都隐式具有"任意"类型.ts(7006(

有人知道如何帮助我或告诉我如何解决这个问题吗？

Answer 1

const-repo:RepositoryProps|null对象可能是"null">

我认为这个错误是由行{repo.map(repositories => (引起的？TypeScript会给您错误，因为这一行的repo可能是null。在加载获取请求时，或者在获取过程中出现错误(例如网络故障(时，都会发生这种情况。你可以通过适应这种情况来解决这个问题，例如使用可选的链接：

{repo?.map(repositories => (
/* ... */
)}