Question

我正在使用Preact-Router进行Preact-CLI项目，并且在localhost上运行良好。但是构建后的生产效果不佳。

我创建了一个单页对象，该对象从JSON文件动态获取其内容（在项目内部而不是外部）。因此，我为每个不同的页面加载了两次相同的页面对象。

我获得页面URL（使用this.props.permalink），并将其与JSONObject.title进行比较。如果它们相同，我想获取相应的JSON内容以将其显示在正确的页面上。在localhost上可以像超级按钮一样工作，但不适用于生产环境。

问题：所有页面都以某种方式获得第一个JSON元素的内容。首先，我认为这是服务器问题，但我错了。预渲染/构建后，构建的文件错误。因此，页面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。当代码非常针对您的功能时，很难遵循它。您可以简化它，并专注于令人困扰的问题。您提供的大多数代码都与您的问题无关，但无论如何都会使我们经历它。

专案在localhost上运作良好，但建物遇到问题

1 个答案: