使用本地存储在 gatsby 构建中未更新图像源

Question

我正在尝试为首次使用localstorage 访问该网站的用户显示不同的图像集，一切都在 gatsby develop 中按预期工作，但是当我使用 gatsby build 构建网站时，始终使用它返回仅对首次使用的用户显示的图像。这是完整的代码

import * as React from 'react';
import { Component } from 'react';

let visited = typeof window !== 'undefined' && window.localStorage.getItem('visited')
var items = [
  "https://picsum.photos/id/40/200/300", 
  "https://picsum.photos/id/30/200/300",
  "https://picsum.photos/id/20/200/300",
  "https://picsum.photos/id/10/200/300"
]

class IndexPage extends Component {

  reTargetImages() {
        typeof window !== 'undefined' && window.localStorage.setItem("visited", JSON.stringify('1'));
    }

  componentDidMount() {
    this.reTargetImages()
  }

  render() {
    if(!visited) {
      items = [
        "https://picsum.photos/id/10/200/300", 
        "https://picsum.photos/id/30/200/300",
        "https://picsum.photos/id/20/200/300",
        "https://picsum.photos/id/40/200/300"
      ]
    }
    return (
      <main>
        <title>Home Page</title>
        <h1>
          Congratulations
          <br />
          <span>— you just made a Gatsby site! </span>
          {items && items.map((item, index) => {
            return (
              <img id={`img-${index}`} src={`${item}`} />
            )
          })}
          </span>
        </h1>
      </main>
  )
  }
}

export default IndexPage

即使localstorage 设置正确，代码也始终返回适用于首次使用的用户的图像。 我是

      [
        "https://picsum.photos/id/10/200/300", 
        "https://picsum.photos/id/30/200/300",
        "https://picsum.photos/id/20/200/300",
        "https://picsum.photos/id/40/200/300"
      ]

该问题仅出现在生产版本中，并且在开发中工作正常

Answer 1

条件检查前给出localstorage getitem语句

...
visited = (typeof window !== 'undefined') && (window.localStorage.getItem('visited'));
console.log(visited);
if(!visited) {  
...

注意：在每条语句的末尾加上分号。

Answer 2

您应该需要使用状态来强制更改您的items 变量。静态方法在这里不适合（或者可能会导致您出现一些不需要的行为）。此外，使用布尔值使您的条件不成立。比如：

import * as React from 'react';
import { Component } from 'react';

let visited = typeof window !== 'undefined' && window.localStorage.getItem('visited')

class IndexPage extends Component {
   constructor() {
    super();
    this.state = {items: [      
      "https://picsum.photos/id/40/200/300", 
      "https://picsum.photos/id/30/200/300",
      "https://picsum.photos/id/20/200/300",
      "https://picsum.photos/id/10/200/300"
    ]};
   }
  
  reTargetImages() {
        typeof window !== 'undefined' && window.localStorage.setItem("visited", true));
    }

  componentDidMount() {
    this.reTargetImages()
  }

  render() {
    if(!visited) {
      this.setState({
         items: [
            "https://picsum.photos/id/10/200/300", 
           "https://picsum.photos/id/30/200/300",
           "https://picsum.photos/id/20/200/300",
           "https://picsum.photos/id/40/200/300"
         ]
      })
    }
    return (
      <main>
        <title>Home Page</title>
        <h1>
          Congratulations
          <br />
          <span>— you just made a Gatsby site! </span>
          {this.state.items && this.state.items.map((item, index) => {
            return (
              <img key={`img-${index}`} id={`img-${index}`} src={item} />
            )
          })}
          </span>
        </h1>
      </main>
  )
  }
}

export default IndexPage

此外，在使用渲染元素的循环时添加key 属性。

请记住，您将componentDidMount 中的visited 变量设置为true（或在您的情况下为1），因此一旦加载DOM 树，它将匹配!visited条件显示您的原始items。我不认为这是否是您想要实现的目标，但这是使用状态更改相同变量以使用相同代码显示不同结果的正确方法。

我还建议您在 localStorage 中的状态中添加 visited 变量，并在需要时相应地更改两者。