React组件传参问题：传递Username时API请求出现undefined

核心问题拆解 #

你遇到的undefined请求URL问题，主要来自三个方面：

1. Fetch未解析JSON响应：GitHub API返回的是JSON格式数据，直接读取res.data会得到undefined，必须先调用res.json()解析。
2. 状态更新逻辑错误：RepoCard中把仓库列表数据错误存入了repoDetails状态，导致仓库列表无法渲染，同时空值校验缺失，触发无效请求。
3. 未处理空用户名请求：点击按钮时未检查用户名是否为空，导致出现/users//repos或/users/undefined/repos的无效URL。

具体修复步骤 #

1. 修正RepoCard的Fetch请求与状态逻辑 #

更新searchRepos和getRepoDetails函数，添加响应解析、空值校验和错误处理：

const RepoCard = ({ username }) => {
  const [repos, setRepos] = useState([]);
  const [repoDetails, setRepoDetails] = useState();
  const [repoDetailsLoading, setRepoDetailsLoading] = useState(false);
  const [click, setClick] = useState(false);

  const handleClick = () => {
    setClick(!click);
  };

  function searchRepos() {
    // 空用户名校验
    if (!username.trim()) {
      alert('请先输入有效的GitHub用户名');
      return;
    }

    fetch(`https://api.github.com/users/${username}/repos`)
      .then(res => {
        // 检查请求是否成功
        if (!res.ok) throw new Error('获取仓库列表失败');
        return res.json();
      })
      .then(data => {
        setRepos(data); // 将仓库列表存入repos状态，用于渲染
        console.log('仓库列表:', data);
      })
      .catch(err => console.error(err));
  }

  function renderRepo(repo) {
    return (
      <div
        className={styles.repoContainer}
        onClick={() => getRepoDetails(repo.name)}
        key={repo.id}
      >
        <h2 className={styles.repoName}>{repo.name}</h2>
      </div>
    );
  }

  function getRepoDetails(repoName) {
    if (!username.trim() || !repoName) return;
    
    setRepoDetailsLoading(true);
    fetch(`https://api.github.com/repos/${username}/${repoName}`)
      .then(res => {
        if (!res.ok) throw new Error('获取仓库详情失败');
        return res.json();
      })
      .then(data => {
        setRepoDetailsLoading(false);
        setRepoDetails(data);
        console.log('仓库详情:', data);
      })
      .catch(err => {
        setRepoDetailsLoading(false);
        console.error(err);
      });
  }

  // 剩余渲染逻辑保持不变
  return (
    <div className={styles.resultsContainer}>
      {repos.map(renderRepo)}
      <button className={styles.listRepos} onClick={searchRepos}>
        List public repos:
      </button>
      {/* 剩余内容省略 */}
    </div>
  );
};

export default RepoCard;

2. 确认SearchUser的props传递逻辑 #

当前SearchUser组件中<RepoCard username={username} />的写法是正确的，username状态会实时传递给子组件，无需修改。如果仍出现undefined，可以在RepoCard中添加console.log确认props：

const RepoCard = ({ username }) => {
  console.log('当前接收的用户名:', username);
  // 剩余逻辑
};

额外优化建议 #

• 添加加载状态：在searchRepos中增加setLoading(true)，请求完成后设为false，提升用户体验。
• 取消未完成请求：使用AbortController避免组件卸载时的内存泄漏，比如在组件卸载时取消正在进行的请求。

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