如何将 Github GraphQL API 提交响应映射到 react-bootstrap Cards？答案

【问题标题】：How to map Github GraphQL API commit responses to react-bootstrap Cards?如何将 Github GraphQL API 提交响应映射到 react-bootstrap Cards？
【发布时间】：2021-05-16 02:18:15
【问题描述】：

以下所有代码都在名为 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 卡代码映射提交或 innerCommits：

    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>

【问题讨论】：

标签： reactjs react-hooks react-bootstrap react-apollo github-api-v4

【解决方案1】：

您可能缺少所需的 Bootstrap CSS。

将此导入添加到应用的顶层某处，例如index.js 或App.js：
import "bootstrap/dist/css/bootstrap.min.css";

【讨论】：

我确实导入了 CSS。在渲染 CommitCards 的父组件中，我已经做了类似的事情。该组件是 RepoCards，我也将它们嵌套在 CardDeck 中。卡片渲染良好。

【解决方案2】：

所以我想通了……

  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>
    ))

注意 ( 与 { .

【讨论】：