如何解决如何将 Github GraphQL API 提交响应映射到 react-bootstrap 卡?
以下所有代码都在名为 CommitCards 的自定义组件中。
给定以下使用 React Apollo 的 gql 查询。
const GET_REPO_COMMITS = gql`
query GetRepoCommits($repoName: String!) {
repository(name: $repoName,owner: "FernandoH-G") {
defaultBranchRef {
target {
... on Commit {
history(first: 5) {
edges {
node {
pushedDate
message
url
}
}
}
}
}
}
}
}
`;
const repoName = props.rName
const { loading,error,data } = useQuery(GET_REPO_COMMITS,{
variables: { repoName },});
if (loading) return (
<p>Loading...</p>
);
if (error) return (
<p>Error.</p>
);
我能够从属于给定所有者的给定存储库中获取最后 5 次提交。
鉴于 GraphQL 的 JSON 响应结构的性质,我觉得有必要执行以下操作:
const commits = data.repository.defaultBranchRef.target.history.edges
const innerCommits = commits.map(com =>(
com.node
))
或多或少使用以下 react-strap Card 代码映射提交或内提交:
return commits.map(com => {
<Card
key={com.node.url}
border="info">
<Card.Body>
<Card.Header as="h4"> {com.node.pushDate} </Card.Header>
<Card.Text> {com.node.message}</Card.Text>
</Card.Body>
</Card>
})
在屏幕上呈现卡片。
请注意,使用以下测试 html 确实显示了正确的信息,就像单个长字符串一样。
return(
<p>{commits.map( a => (
a.node.message
))}</p>
)
组件在此处调用:
<CardDeck>
<CommitCards rName={value} />
</CardDeck>
解决方法
您可能缺少所需的 Bootstrap CSS。
将此导入添加到您的应用程序的顶层,例如 index.js
或 App.js
:
import "bootstrap/dist/css/bootstrap.min.css";
查看更多:https://react-bootstrap.github.io/getting-started/introduction#stylesheets
,所以我想通了...
return commits.map(com => {
<Card
key={com.node.url}
border="info">
<Card.Body>
<Card.Header as="h4"> {com.node.pushDate} </Card.Header>
<Card.Text> {com.node.message}</Card.Text>
</Card.Body>
</Card>
})
应该是这样的:
return commits.map(com => (
<Card
key={com.node.url}
border="info">
<Card.Body>
<Card.Header as="h4"> {com.node.pushDate} </Card.Header>
<Card.Text> {com.node.message}</Card.Text>
</Card.Body>
</Card>
))
注意 ( 与 { .
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。