import React, { useState } from "react"; import { loadJSON, saveJSON } from "../utils/index"; import { useEffect } from "react"; const GitHubLogin = ({ login }: { login: string }) => { const [data, setData] = useState(loadJSON(`user:${login}`)); useEffect(() => { if (!data) return; if (data.login === login) return; const { name, avatar_url, location } = data; saveJSON(`user:${login}`, { name, login, avatar_url, location, }); }, [data]); useEffect(() => { if (!login) return; if (data && data.login === login) return; fetch(`http://api.github.com/user/${login}`) .then((response) => response.json()) .then(setData) .catch(console.error); }, [login]); if (data) { return <pre>{JSON.stringify(data, null, 2)}</pre>; } return null; }; export default GitHubLogin;
这个组件详细解释了获取用户登录信息与存储的过程,对于获取而言,如果没有login怎么办?有了之后怎么办.对与存储没有怎么办,有了之后怎么办.对于展示,没有什么也不展示,有了就展示所获取的信息
标签:return,GitHubLogin,组件,const,login,useEffect,data From: https://www.cnblogs.com/xxxccczzz/p/16647940.html