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

Question

以下所有代码都位于名为 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>

Answer 1

您可能缺少所需的 Bootstrap CSS。

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

查看更多：https ://react-bootstrap.github.io/getting-started/introduction#stylesheets

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

注意 ( 与 { 。