React调用GitHub API首次请求白屏 二次正常 报Value.map is not a function错误

报错和白屏完全是初始值类型错误+渲染判断逻辑缺失导致的：

• 你定义Value状态时给的初始值是空字符串''，字符串本身没有map方法，组件首次渲染只要走到调用Value.map的分支就会直接抛错，打断整个渲染流程，表现就是白屏。
• 现有渲染逻辑只判断了data.name是否存在，完全没校验Value的状态：第一次按回车发请求时，用户信息接口大概率比仓库列表接口返回快，这时候data.name已经有值，会直接进入渲染仓库列表的分支，但此时Value要么还是初始的空字符串，要么还没拿到接口返回的数组数据，直接调map必然报错。
• 额外问题：接口没加错误捕获，请求失败（比如用户名不存在、触发GitHub接口限流、网络异常）时也会导致页面崩溃；async/await和.then混写属于冗余逻辑，没有必要。

1. 对齐状态初始值类型，存储仓库列表的状态初始值从空字符串改为空数组，从根源上避免类型不匹配报错
2. 调整请求逻辑，并行拉取用户信息和仓库列表，等两个接口都返回后再更新状态，避免单接口提前返回触发异常渲染
3. 补全渲染判断条件，增加加载、错误状态兜底，同时给接口返回值加类型校验，避免异常格式数据导致报错

修复后的完整可运行代码：

import { useState } from 'react';
import axios from 'axios';

export default function GithubUserSearch() {
  const [data, setData] = useState({});
  const [user, setUser] = useState('');
  // 仓库列表初始值改为空数组，和接口返回的数组类型对齐
  const [repos, setRepos] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const fetchGithubData = async () => {
    if (!user.trim()) return;
    setLoading(true);
    setError('');
    try {
      // 并行请求两个接口，比串行请求速度更快
      const [userInfoRes, userReposRes] = await Promise.all([
        axios.get(`https://api.github.com/users/${user}`),
        axios.get(`https://api.github.com/users/${user}/repos`)
      ]);
      setData(userInfoRes.data);
      // 兜底校验，确保给repos赋值的一定是数组
      setRepos(Array.isArray(userReposRes.data) ? userReposRes.data : []);
    } catch (err) {
      setError('获取信息失败，请检查用户名是否正确或网络是否正常');
      setData({});
      setRepos([]);
    } finally {
      setLoading(false);
    }
  };

  const handleKey = (e) => {
    if (e.key === 'Enter') {
      fetchGithubData();
    }
  };

  return (
    <div className="bbody">
      <input
        id="search-bar"
        onChange={(event) => setUser(event.target.value)}
        placeholder="Enter User"
        type="text"
        onKeyPress={handleKey}
      />

      {loading && <p>加载中...</p>}
      {error && <p className="errorMsg">{error}</p>}

      {!loading && !error && !data.name ? (
        <div>
          <p className="errorMsg">No Data Found</p>
        </div>
      ) : !loading && !error && data.name ? (
        <div className="inner-img">
          <img src={data.avatar_url} alt={data.name} />
          <h2>{data.name}</h2>
          <p>{data.bio || '该用户未填写个人简介'}</p>
          <div id="repos">
            {repos.map((repo) => {
              return (
                <a key={repo.id} href={repo.html_url} target="_blank" rel="noreferrer">
                  <button id="repos-link">{repo.name}</button>
                </a>
              );
            })}
          </div>
        </div>
      ) : null}
    </div>
  );
}

• 把原命名不规范的Value改为语义化的repos，降低维护成本
• 去掉了async/await混写.then的冗余逻辑，用Promise.all实现接口并行请求
• 增加了加载、错误状态的UI提示，用户操作反馈更清晰
• 给外链a标签补充了rel="noreferrer"属性，消除React的安全警告
• 对接口返回的仓库数据做了数组类型校验，哪怕接口返回异常格式也不会触发map报错

内容的提问来源于stack exchange，提问作者harmeet