`Gatsby Build`错误地输出了随机排列的数组对象

Question

我有一个使用ReactStraps轮播组件构建的推荐幻灯片。每张幻灯片都是通过.json数组处理的，该数组包含推荐作者的姓名，标题，他们的引文和头像。然后，一个JS函数将数组的顺序重新排列，以确保每个页面加载都以随机顺序加载幻灯片。

问题是，一旦构建了该项目并将其托管在实时服务器上，证明图像就会应用到错误的幻灯片上-但是在[html <img>元素中被引用时，[。

此外，我无法使用gatsby develop终端输入来复制此问题。相反，似乎此错误仅在gatsby build之后或托管在实时服务器上才会发生。

。json文件遵循以下结构：

[
    {
        "name": "First Name",
        "title": "First Job Title",
        "quote": "First quote.",
        "image": "/home/quotes/first_image.jpg"
    },
    {
        "name": "Second Name",
        "title": "Second Job Title",
        "quote": "Second quote.",
        "image": "/home/quotes/second_image.jpg"
    }
]

推荐书成分：
class Testimonials extends React.Component {
    render() {
        const json = this.props.testimonial;

        return (
            <Carousel controls={true}>
                {json.map(edge => (
                    <Carousel.Item>
                        <div>
                            <p className="testimonialText">{edge.node.quote}</p>

                            <p className="testimonialAuthor">{edge.node.name}</p>
                            <p className="testimonialAuthorTitle">{edge.node.title}</p>

                            // This outputs the correct image url
                            {edge.node.image}

                            // This outputs the image url from a different object in the array
                            <img src={edge.node.image} alt="" />    
                        </div>
                    </Carousel.Item>
                ))}
            </Carousel>
        );
    }
}

和随机播放功能：
const Home = (props) => {
    const json = props.data.allTestimonialsJson.edges;

    function shuffle(array) {
        array.sort(() => Math.random() - 0.5);
    }

    shuffle(json);

    <div>
        <Testimonials testimonial={json} />
    </div>
}

我已经意识到，删除随机播放功能将防止图像乱序处理，因为对象只会按照从数组输出的顺序加载图像。
此外，我尝试更新随机播放功能以解决此问题。具体来说，我使用了the shuffle array function referenced in this thread。但是，更新此随机播放功能无法解决该问题。

Answer 1

您正在尝试对不可变的对象进行突变（数据应在Gatsby中保持不变），我将首先进行检查。

例如，您可以创建新数组并对其进行排序：

const Home = (props) => {
    const json = props.data.allTestimonialsJson.edges;

    function shuffle(array) {
        return [...array].sort(() => Math.random() - 0.5);
    }

    const sortedArray = shuffle(json);

    <div>
        <Testimonials testimonial={sortedArray} />
    </div>
}

[您应注意，按照定义，静态HTML中的盖茨比将产生一个混洗结果。您可以将默认顺序放置在useState中，并在useEffect中将其随机播放：
const Home = (props) => {
    const json = props.data.allTestimonialsJson.edges;
    const [testimonial, setTestimonial] = useState( json )

    useEffect(() => {
      function shuffle(array) {
        return [...array].sort(() => Math.random() - 0.5);
      }
      setTestimonial( shuffle(testimonial) )
    }, [])

    <div>
        <Testimonials testimonial={testimonial} />
    </div>
}

[这是一种可能的解决方案，它将对该组件进行两次渲染（第一次使用静态HTML，第二次当JS准备就绪时），另一种方法是使用useState( null )并为其隐藏<Testimonials>，它将一次渲染滑块，但在静态HTML部分中将不可用。
还运行npm run build和gatsby serve应该在本地主机上运行构建版本：9000。