Question

我正在学习如何使用shopify插件，但是对于此页面，它无法访问我的shopify中的数据。

对于其他页面，我使用类似的代码，并且仅在此页面上可以正常工作，我无法确定错误> << / p>

我犯过任何错误吗？

这是我的graphql查询

{
  "data": {
    "allShopifyProduct": {
      "nodes": [
        {
          "id": "Shopify__Product__Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzIyMDEzNzg2MTk0NDY=",
          "images": [
            {
              "id": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0SW1hZ2UvNzU5MDg5NDAxMDQyMg==",
              "originalSrc": "https://cdn.shopify.com/s/files/1/0164/9121/6950/products/Forfacebooksquare.jpg?v=1562306206"
            }
          ],
          "title": "NJ Experience",
          "description": "An Owlnext-Intern",
          "handle": "nj-experience"
        }
      ]
    }
  }
}

这是我的代码

import React, {Component} from 'react';
import { withStyles } from '@material-ui/styles';
//import Grid from '@material-ui/core/Grid';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
//import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
//import {BrowserRouter,Route,Link} from 'react-router-dom';
//import ProductListing from "../ProductListing";
import datas, {Bought} from '../components/data';
import { Link , navigate} from "gatsby";
import { useStaticQuery, graphql } from 'gatsby';


const styles = {
    card : {
        height : 350
    }
}


class Cards extends Component{

    constructor(props){
        super(props);
        this.state = {

        };
    };


    // Another method which I tried but not working right now too so i remain the code here

    // data = useStaticQuery(
    //     graphql`
    //     query {
    //         allShopifyProduct {
    //           nodes {
    //             id
    //             images {
    //               id
    //               originalSrc
    //             }
    //             title
    //             description
    //             handle
    //           }
    //         }
    //       }
    //     ` 
    //   );


    handleSomething= () =>{
        console.log('test')
        this.analyticsEvents();
        this.handlePushData();
    };

    analyticsEvents = () =>{
        console.log("ga");

       // ga('send', 'event' ,'Bought1', 'Bought2', 'Bought3');

    };

    //Checking
    componentDidMount(){
        console.log(this.props.data.allShopifyProduct.nodes[0].handle);
      };


    handlePushData = () => {
        navigate(`/product/${this.props.data.allShopifyProduct.nodes[0].handle}/`);
        Bought.push({ImageLink: this.props.ImageLink, Title: this.props.Title , Price: this.props.Price});
    };

    render(){

        const { classes } = this.props;

        return(

            <Card className={classes.card}>
                <CardActionArea>

                    <CardMedia
                        style = {{objectFit: "contain"}}
                        component="img"
                        height="200"
                        image= {this.props.ImageLink}
                        /> 

                    <CardContent>

                    <Typography gutterBottom  component="h2"> 
                        {this.props.Title}
                    </Typography>

                    <Typography variant="body2" color="textSecondary" component="p">
                    {this.props.Price}
                    </Typography>

                    <Button size="small" variant="contained" style = {{marginTop: 10, backgroundColor: "#0ABAB5"}} 
                    onClick={this.handleSomething}>
                        ADD TO CART
                    </Button>

                </CardContent>

                </CardActionArea>
            </Card>


        )
    }
}


export const query = graphql`
query Query{
    allShopifyProduct {
      nodes {
        id
        images {
          id
          originalSrc
        }
        title
        description
        handle
      }
    }
  }
` 

export default withStyles(styles)(Cards);

它应该能够获取数据

更新

这是我的index.js，其中包含Card组件


Thanks so much for helping out! This is the first page which include the cards component

Btw,do you mean that the data in graphQl have to pass in to the Cards component in this page? I thought the graphQL data could be import at any .js file as long as you call it in the .js file you want

import React, {Component} from 'react';
import { Link } from "gatsby"
import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"
import Cards from '../components/Cards';
import Grid from '@material-ui/core/Grid';
//Assets
import datas from '../components/data';
import { graphql } from "gatsby"



export default class HomePage extends Component{


  render(){

      return(
        <>
          <SEO title="Home" />
          <Grid
              container
              spacing={8}
          >
              {datas.map(books =>(
                  <Grid key={books.Title} item xs={3}>    

                      <Cards history={this.props.history}  ImageLink={books.ImageLink} Title={books.Title} Price={books.Price} />
                  </Grid>
              ))}            
          </Grid>

        </>
      )


  }

}```

Answer 1

您应该像这样componentDidUpdate而不是componentDidMount来登录

componentDidUpdate(){
   console.log(this.props.data.allShopifyProduct.nodes[0].handle);
};

由于componentDidMount仅在安装组件时执行，因此数据可能需要花费一些时间，因此componentDidMount有可能在数据进入this.props.data之前得到执行。最好的方法是在componentDidUpdate函数中。

更新

在使用Cards组件时，

<Cards history={this.props.history}  ImageLink={books.ImageLink} Title={books.Title} Price={books.Price} />

您通过history作为道具，而不是data，因此您必须使用它，

componentDidUpdate(){
   console.log(this.props.history.allShopifyProduct.nodes[0].handle);
};

无法从我从graphQL

1 个答案: