项目在本地主机上运行良好，但构建出现问题

Question

我正在使用 Preact-Router 开发 Preact-CLI 项目，它在本地主机上运行良好。但是构建后生产效果不佳。

我创建了一个单页对象，它从 JSON 文件（项目内部而非外部）动态获取其内容。所以我为每个不同的页面加载了相同的页面对象 2 次。

我获取页面 url（使用 this.props.permalink）并将其与 JSONObject.title 进行比较。如果它们相同，我想获取相应的 JSON 内容以将其显示在正确的页面上。在本地主机上就像一个魅力，但不是在生产中。

问题：所有页面都以某种方式获得第一个 JSON 元素的内容。一开始我以为是服务器问题，但我错了。在prerendering/build之后构建的文件是错误的。所以页面B的预渲染html包含了页面A的预渲染内容。我的猜测是在构建期间 this.props.permalink 不起作用。我该如何处理？

附加信息：我使用 prerender 函数但不使用 service worker 进行构建。

谢谢！

更新： 我已经重写了函数。我想我需要通过循环设置动态内容，以便在构建期间编译器循环通过它并能够预呈现所有页面。

迭代和设置状态有效，但只有 PrerenderUrls 数组的最后一个元素被存储。所以现在所有页面都获得第一个的 JSON 内容元素.

componentWillMount() {


        for (var i = 0; i <= PrerenderUrls.length; i++) {

            // the code you're looking for
            let removeDash = new RegExp("-")
            var needle = PrerenderUrls[i].title
            var needle1 = needle.replace(removeDash, " ")
            alert("1")


            // iterate over each element in the array
            if (needle1 != "Homepage") {
                for (var x = 0; x < Data.length; x++) {

                    // look for the entry with a matching `code` value
                    let removeDash = new RegExp("-")
                    var nodash = Data[x].title.replace(removeDash, " ")
                    var nocaps = nodash.toLowerCase()
                    if (nocaps == needle1) {

                        alert("needle2: "+ needle1 + " nocaps: " + nocaps)
                        //alert("data "+ Data[x].title)
                        this.setState({
                            pageTitle: Data[x].title,
                            descShort: Data[x].descShort,
                            description: Data[x].desc,
                            img: Data[x].img
                        })
                        alert("state "+ this.state.pageTitle)
                    } 
                } 
            }
        }

Answer 1

根据您的描述，您似乎遇到了标准的 Javascript 闭包问题。我注意到您同时使用 let 和 var。如果支持 let，请使用它代替 var。它将自动解决您的闭包问题，因为 let 使用块作用域而不是函数作用域创建变量。否则，您可以尝试复制 let 的幕后工作方式 - 将变量抛给回调函数。内容如下：


    // ...
    for (var x = 0; x < Data.length; x++) {
        try { throw x }
        catch(iterator) {
            this.setState({
                pageTitle: Data[iterator].title
            });
        }
    }

PS。当您的代码如此特定于您的功能时，很难遵循您的代码。您可以简化它，并专注于麻烦的问题。您提供的大部分代码与您的问题无关，但无论如何都会让我们解决它。

项目在本地主机上运行良好，但构建出现问题

Project works fine on localhost but the build gets an issue

javascript

arrays

json

build

prerender