React处理GitHub API数组时遇Uncaught TypeError: data.find is not a function

你的报错Uncaught TypeError: data.find is not a function是因为组件第一次渲染时，Getapiinfo返回的是空字符串""，而字符串没有find方法。

虽然API请求完成后data会变成数组，但React组件会先执行初始渲染，这时data还未被API数据更新，Getapiinfo返回的是你设置的默认值""，调用find自然会触发类型错误。

1. 修正自定义Hook的初始值与依赖项 #

修改Getapiinfo，把初始状态设为空数组（而非空字符串），同时补充useEffect的依赖项，确保参数变化时重新请求：

function Getapiinfo(login) {
    const [data, setData] = useState([]); // 初始值改为空数组

    useEffect(() => {
        fetch(`https://api.github.com/users/${login}/repos`)
        .then((response) => response.json())
        .then(setData); 
    }, [login]); // 加入login作为依赖，参数变化时重新请求

    return data;
}

这样即使在数据加载完成前，data也是数组类型，find方法可以安全调用，不会触发报错。

2. 可选：添加加载状态提示（提升用户体验） #

如果需要在数据加载期间给用户反馈，可以在组件中判断数组长度：

const RepoList = ({ repos }) => {
    const data = Getapiinfo("egor-no");
    const repo = data.find(item => item.name === "clangametesttask")

    // 数据未加载完成时显示提示
    if (data.length === 0) {
        return <p>加载中...</p>;
    }

    return (
    <>
        <p>{JSON.stringify(repo)}</p>
    </>
    ); 
}

内容的提问来源于stack exchange，提问作者egor-n