如何设置需要浏览器 'window' 变量的状态

Question

我决定改写我的问题。

我有一个名为 'sku' 的组件，它使用条带设置其 public 键，然后在渲染中我使用该条带访问状态与 graphql 配对来提取数据。

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

解决方法是将语句包装在 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

我通过在 componentWillmount()

中添加 this.setState 找到了解决方案

我知道它会导致 re-render，但在我找到更好用的东西之前，这只是目前的解决方案。

Answer 2

这样的事情怎么样？

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
  //
}

如果有效请告诉我。

如何设置需要浏览器 'window' 变量的状态

How do I set the state that required browser 'window' variable

javascript

gatsby

netlify