在React中处理JSON数组并获取Uncaught TypeError:data.find不是函数

Question

我正在学习React并制作一个非常简单的应用程序，在那里我可以从github api获取信息并显示我的repo信息。它不起作用，当我试图找到一个特定的时，我不断地得到一个错误

未捕获类型错误：data.find不是函数

这是我的代码(我删除了几乎所有有意义的东西，只留下了我试图从阵列中获得至少一个存储库的部分(：

`const RepoList = ({ repos }) => {
const data = Getapiinfo("egor-no");
const repo = data.find(item => item.name == "clangametesttask")
return (
<>
<p>{JSON.stringify(repo)}</p>
</>
); 
}`

Getapiinfo函数就是这样做的(获取关于我所有转发的所有信息(：

function Getapiinfo(login) {
const [data, setData] = useState(null); 
useEffect(() => {
fetch(`https://api.github.com/users/${login}/repos`)
.then((response) => response.json())
.then(setData); 
}, []);
if (data) {
return data; 
};
return "";
}

我不确定我遗漏了什么，因为data绝对是一个数组。至少当我删除查找行时，它会按预期工作，并通过其索引获得一个元素：

const RepoList = ({ repos }) => {
const data = Getapiinfo("egor-no");
return (
<>
<p>{JSON.stringify(data)}</p>
<p>{JSON.stringify(data[0])}</p>
</>
); 
}

你能帮我吗？我已经在这个问题上花了太多时间了，我知道这是一个我无法注意到的简单问题。我也看过这里的几个主题，但似乎没有一个正确的答案或任何答案：D

Answer 1

如果没有找到任何内容，则应该返回一个数组而不是字符串。因此，只需更改为返回一个空数组，然后检查组件中的数组是否为空，即可显示数据

function Getapiinfo(login) {
const [data, setData] = useState([]); 
useEffect(() => {
fetch(`https://api.github.com/users/${login}/repos`)
.then((response) => response.json())
.then(setData); 
}, []);
if (data) {
return data; 
};
return [];
}

然后

<>
{data.length > 0 ? (
<>
<p>{JSON.stringify(data)}</p>
<p>{JSON.stringify(data[0])}</p>
</>) : null
}
</>

Answer 2

Getapiinfo在从API调用分配值之前首先返回""。

因此，使用useMemo检查数据是否有值

const repo = useMemo(() => data?.find(item => item.name == "clangametesttask"), [data])