Javascript 使用路径'；在数组中查找索引；s params.name在更改路径后延迟

我有一系列的项目。每个项目包含多个图像。通过迭代这个数组，我显示每个名称。我为每个项目分配了

Link

，导航到包含项目名称的路径。我的意图是获取这个名称，然后显示单击的项目的图像

项目页面也包含下一个项目按钮-单击此按钮将更改路径。我就是这样得到这个新项目的：

cart;
nextCart;

componentDidUpdate(prevProps, prevState, snapshot) {
        const prevPathname = prevProps.location.pathname;
        const pathname = this.props.location.pathname;

        if (pathname !== prevPathname) {
            this.getCarts();
        }
}

getCarts = () => {
        const name = this.props.match.params.name;
        this.cart = this.props.carts.find(value => value.name === name);
        const currentIndex = this.props.carts.findIndex(value => value.name === name);
        const nextIndex = currentIndex < this.props.carts.length - 1 ? currentIndex + 1 : 0;
        this.nextCart = this.props.carts[nextIndex];
};

App.js

function App() {

    ...    

    return (
        <div className="App">
            <Router history={history}>
                <ScrollToTop>
                    <Header/>
                    {projects ?
                        <div>
                            <Route path="/project/:name" component={() => <Project carts={projects}/>}/>
                            <Route path="/about" component={About}/>
                            <div className="hs">
                                <Route path={["/", "/project/:name"]} exact
                                       component={() => <CartHolder carts={projects}/>}/>
                            </div>
                            <div className="hs-mobile">
                                <Route path="/" exact component={() => <CartHolderMobile carts={projects}/>}/>
                            </div>
                        </div>
                        : <div className="black-overlay"/>}
                </ScrollToTop>
            </Router>
        </div>
    )
}

函数应用程序（）{
...    
返回(
{项目？
}/>
}/>
}/>
: }
)
}

如果没有一个可用的示例，很难确定，但是如果它在稍微延迟后工作，则听起来像是从服务器加载了映像（如中所示，映像尚未下载，因此您需要等待从服务器下载映像）。图像初始加载后是否有延迟？换句话说，在第一次显示图像后延迟是否持续

如果是这样，您可以在获取列表后重试。这样，它们就已经加载到客户机上，并且可以立即呈现

---

希望有帮助。

如果不在

中看到render的实现，就很难判断，但这可能是因为在组件上设置属性（

this.cart=

）不会导致组件重新呈现。调用

setState

将导致重新渲染。许多人想考虑将一些信息存储在组件状态中，而只有一个延迟，当数据已经被设置时，更改数据。换句话说，当我单击按钮更改路径时，会有一个延迟，直到旧项目的图像消失并将替换为新图像。如果查看同一图像两次，会有延迟吗？例如，导航到一个图像（延迟），导航到另一个图像（延迟），导航回第一个图像（无延迟）。如果是这种情况，那么延迟可能是由于等待从服务器加载映像造成的。查看我上面链接的预加载示例。你是对的，它是由图像加载引起的。这看起来很奇怪，因为图像容器组件没有丢失旧图像，而是保留旧图像，直到加载新图像。通过在组件更新时将src的状态设置为

null

，我修复了这个问题。

function App() {

    ...    

    return (
        <div className="App">
            <Router history={history}>
                <ScrollToTop>
                    <Header/>
                    {projects ?
                        <div>
                            <Route path="/project/:name" component={() => <Project carts={projects}/>}/>
                            <Route path="/about" component={About}/>
                            <div className="hs">
                                <Route path={["/", "/project/:name"]} exact
                                       component={() => <CartHolder carts={projects}/>}/>
                            </div>
                            <div className="hs-mobile">
                                <Route path="/" exact component={() => <CartHolderMobile carts={projects}/>}/>
                            </div>
                        </div>
                        : <div className="black-overlay"/>}
                </ScrollToTop>
            </Router>
        </div>
    )
}