Question

我决定改写我的问题。

我有一个名为'sku'的组件，该组件使用Stripe设置其公共密钥，然后在渲染器中，我将使用该Stripe访问状态与graphql配对以拉入数据。

我遇到的问题是在netlify上运行或构建它时，无法访问构建窗口变量。

解决方法是将语句包装在if (typeof window !== 'undefined')条件中，该条件会使构建成功。但是，问题在于您无法使用if语句包装组件状态。

我不确定该如何解决...

有问题的组件：

import React, { Component } from 'react'
import { graphql, StaticQuery } from 'gatsby'
import SkuCard from './skuCard'

const conatinerStyles = {
  display: 'flex',
  flexDirection: 'row',
  flexWrap: 'wrap',
  justifyContent: 'space-evenly',
  padding: '1rem 0 1rem 0',
}

class Skus extends Component {
  // Initialise Stripe.js with your publishable key.
  // You can find your key in the Dashboard:
  // https://dashboard.stripe.com/account/apikeys
  // state = { stripe : 'test' }
  // componentDidMount() { 
    // if (typeof window !== 'undefined') {
      state = {
        stripe: window.Stripe('pk_test_IhM5g81HgmeLxC0CHNoisiRg00084h8HyH', {
          betas: ['checkout_beta_4'],
        }),
      // }
    // }
    }

  render() {
    return (  
      <StaticQuery
        query={graphql`
          query SkusForProduct {
            skus: allStripeSku {
              edges {
                node {
                  id
                  currency
                  price
                  attributes {
                    name
                  }
                }
              }
            }
          }
        `}
        render={({ skus }) => (
          <div style={conatinerStyles}>
            {skus.edges.map(({ node: sku }) => (
              <SkuCard key={sku.id} sku={sku} stripe={this.state.stripe} />
            ))}
          </div>
        )}
      />
    )
  }
}

export default Skus

Answer 1

这样的事情怎么办？

const stripe = () => {
  let stripe = undefined;
  if (typeof window !== "undefined") {
    stripe = window.Stripe("pk_test_IhM5g81HgmeLxC0CHNoisiRg00084h8HyH", {
      betas: ["checkout_beta_4"]
    });
  }
  return stripe;
};

class Skus extends Component {
  state = {
    stripe: stripe()
  };
  //
  // Rest of your component
  //
}

让我知道它是否有效。

Answer 2

我通过在this.setState内添加componentWillmount()找到了解决方案

我知道它会导致重新渲染，但是在我找到更好用的东西之前，这是一个解决方案。

如何设置需要浏览器“窗口”变量的状态

2 个答案: