GitHubLogin组件

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怎么办?有了之后怎么办.对与存储没有怎么办,有了之后怎么办.对于展示,没有什么也不展示,有了就展示所获取的信息