arrays - Array shuffle 在开发时工作，但在生产构建时不工作(React/Gatsby)

Question

我的 gatsby 网站上有这个 React 组件:

import React from 'react'
import Layout from '../components/layout'
import SEO from '../components/seo'
import { graphql } from "gatsby"
import Card from '../components/Card'
import Gallery from '../components/Gallery'
import shuffle from 'lodash/shuffle'

const IndexPage = ({data}) => {
  function linkify(string){
    return string.toLowerCase().replace(/["'()]/g,"").replace(/\s/g, '-');
  }
  return(
  <Layout>
    <SEO />
    <Gallery>
      {
      shuffle(data.allContentfulAlbum.nodes).map((album) => {
        return (
        <Card src={album.cover.file.url} title={album.title} link={'/album/'+linkify(album.title)} />
        )
        })}
    </Gallery>
  </Layout>
)
    }

export default IndexPage

export const query = graphql`
query Albums {
  allContentfulAlbum {
    nodes {
      cover {
        file {
          url
        }
      }
      title
    }
  }
}
`

信息:

• 这是照片库的索引页。
• Card 是接收和显示封面照片的组件，照片顶部是相册名称，整个 Card 是一个到相册页面的链接。
• 您可以通过 https://nicovial.tk 访问此页面所以你明白了，洗牌暂时被禁用。
• lodash是一个 JS 库，具有许多在 npm 上可用的数组处理函数。

预期行为:

• 在每次刷新或重新访问页面时随机打乱卡片顺序。

实际行为:

• 封面照片和链接不会打乱顺序，它们始终按原始顺序显示。
• 但是，专辑标题会打乱顺序，因此卡片显示的名称有误(洗牌时的巧合除外)但链接正确，并且始终按原始顺序显示。

奇怪的细节:

这只发生在生产构建上(本地构建和服务或在线 github/netlify 构建)。运行“gatsby develop”时，行为是预期的行为。

Answer 1

可能有帮助的两件事:

• 您的卡列表缺少 key props ，这对于 React 在打乱列表时保持列表的顺序很重要。

• 在 Gatsby 产品中，您的 html 已经预呈现。这意味着当 React 尝试 rehydrate the dom ，它会发现新的随机列表与服务器呈现的列表不匹配。

您可以通过将索引顺序存储在组件状态中来解决这个问题，然后在无依赖性的 useEffect 或 componentDidMount 中随机播放它。缺点是内容变化会有闪现，可以通过CSS管理，但要考虑SEO。

如果 SEO 无关紧要，您可以简单地呈现任何内容，直到订单被打乱。