Javascript 无法在返回中获取window.location.origin

我对

windows.location.origin

有问题，我无法找出我缺少的内容。当我在

useffect

中使用它和

console.log

时，它可以正常工作，但当我尝试渲染它时，它返回给我

无法读取未定义的属性“origin”

错误。我现在也意识到，当我从以前的页面返回我的页面时，它会显示hrefOrigin，但当我刷新页面时，我再次出现错误。提前谢谢

// @ts-nocheck
import React, { useContext, useEffect, useState } from 'react'
import { isEmpty, path } from 'ramda'
import { ProductContext } from 'vtex.product-context'
import { defineMessages } from 'react-intl'
import fetchRequest from '../utils/fetchRequest'
import styles from './styles.css'
import IconScrew from './Icons/IconScrew' 

const KitItems: StorefrontFunctionComponent<> = () => { 

  const valuesFromContext = useContext(ProductContext)
  if (!valuesFromContext || isEmpty(valuesFromContext)) {
    return null
  } 

  const hrefOrigin = window.location.origin
  
  useEffect( () => {  
       console.log(window.location.origin)
  }, []);
 
  return (<div className={styles.kitItemsMain} >
              {valuesFromContext.selectedItem.kitItems && hrefOrigin && valuesFromContext.selectedItem.kitItems.map(kitItem => 
              <div key={kitItem.itemId} className={styles.kitItemsMainInner}>
                        <div >
                            <img className={styles.kitImages} src={kitItem.sku.images[0].imageUrl} />
                        </div>
                       <div>
                            <h3> {kitItem.sku.name} </h3>
                            <p>Reference: {hrefOrigin} </p>
                            <p>{kitItem.sku.referenceId[0].Value}</p>
                        </div>
                        <p className={styles.kitAmount}> {kitItem.amount} </p>
                        <p> {kitItem.sku.sellers[0].commertialOffer.Price} </p>
              </div>
               )} 
          </div>)
}

export default KitItems

 

/@ts nocheck
从“React”导入React，{useContext，useEffect，useState}
从“ramda”导入{isEmpty，path}
从“vtex.product context”导入{ProductContext}
从“react intl”导入{defineMessages}
从“../utils/fetchRequest”导入fetchRequest
从“./styles.css”导入样式
从“./Icons/IconScrew”导入IconScrew
常量KitItems:StorefrontFunctionComponent=（）=>{
常量值fromContext=useContext（ProductContext）
如果（！valuesFromContext | |为空（valuesFromContext））{
返回空
} 
const hrefOrigin=window.location.origin
useffect（（）=>{
console.log（window.location.origin）
}, []);
返回(
{valuesFromContext.selectedItem.kittitems&&hrefOrigin&&valuesFromContext.selectedItem.kittitems.map（kittitem=>
{kitItem.sku.name}
参考：{hrefOrigin}

{kitItem.sku.referenceId[0].Value}

{kitItem.amount}
{kitItem.sku.sellers[0].commertialOffer.Price}

)} 
)
}
导出默认项目

使用ref或状态变量存储窗口位置，windows.locaton.origin可能仅在组件完全安装后才可用，因此useEffect日志工作正常

// @ts-nocheck
import React, { useContext, useEffect, useState ,useRef} from 'react'

const KitItems: StorefrontFunctionComponent<> = () => { 


  let hrefOrigin = useRef()
  
  useEffect( () => {  
       hrefOrigin.current= window.location.origin
  }, []);
 
  return (<div className={styles.kitItemsMain} >

                       <div>
                            <h3> {kitItem.sku.name} </h3>
                            {hrefOrigin.current && <p>Reference: {hrefOrigin.current}</p>}
                       </div>
          </div>)
}

export default KitItems

/@ts nocheck
从“React”导入React、{useContext、useEffect、useState、useRef}
常量KitItems:StorefrontFunctionComponent=（）=>{
设hrefOrigin=useRef（）
useffect（（）=>{
hrefOrigin.current=window.location.origin
}, []);
返回(
{kitItem.sku.name}
{hrefOrigin.current&&参考：{hrefOrigin.current}
}
)
}
导出默认项目

有点奇怪，如果执行

console.log（hrefOrigin）

，会发生什么情况？它得到了我想要的原点。当我尝试使用它作为回报时，问题就出现了。我现在也意识到，当我从以前的页面进入我的页面时，它会呈现hrefOrigin，但当我刷新页面时，我再次出错。该解决方案工作正常，非常感谢！