reactjs - 未捕获的类型错误:repos.map 不是函数
问题描述
我对使用 react 和 javascript 比较陌生,我正在尝试使用来自此存储库https://api.github.com/search/repositories?q=react的用户输入获取 api
map 应该是一个数组,但我似乎无法弄清楚为什么我的代码中出现此错误:
<script type="text/babel">
function GithubList() {
const [repos, setRepos] = React.useState([]);
const [name, setName] = React.useState('');
const fetchRepo = () => {
fetch(`https://api.github.com/search/repositories?q=${name}`)
.then(response => response.json())
.then(data => {
setRepos(data.items)
})
.catch(err => console.error(err))
};
const inputChanged = (event) => {
setRepos(event.target.value);
};
const repoDetails = repos.map((repo,index) => (
<tr key={index}>
<td>{repo.full_name}</td>
<td>{repo.url}</td>
</tr>
));
return(
<div>
<h2>Repositories</h2>
<input type="text" value={name} onChange={inputChanged} />
<button onClick={fetchRepo}> Search </button>
<table>
<tbody>
<tr>
<th>Name</th>
<th>URL</th>
</tr>
{repoDetails}
</tbody>
</table>
</div>
);
}
ReactDOM.render(<GithubList/>, document.getElementById("root"))
</script>
解决方案
它应该是而setName
不是setRepos
inputChanged
const inputChanged = (event) => {
setName(event.target.value);
};
推荐阅读
- node.js - 从节点 shebang 调用时保持查询器进程处于活动状态
- javascript - 自定义小部件未在 mozilla-services-react-jsonschema-form 中显示
- javascript - Last.Fm API - 尝试在 Node.js 应用程序中使用 track.scrobble 服务时参数无效
- aws-glue - 在 AWS Glue 作业中添加时间戳列
- android - 如何从 Flurry 的隐私仪表板获取同意字符串?
- django - 另一个 Django “应用程序尚未加载”
- php - 显示单选按钮选择的内容
- python - Pandas 在输入 csv 单元格时试图将我的路径转换为浮点数?
- c++ - 如何将 OR (`||`) 的符号放入 while 循环中?
- java - Spring Boot Admin 客户端未注册