Поиск индекса в массиве с использованием пути params.name задерживается после изменения пути

Question

У меня есть множество проектов. Каждый проект содержит несколько изображений. Перебирая этот массив, я отображаю каждое имя. Я назначил 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];
};

Проблема в том, что даже если изображения меняются, это происходит после небольшой задержки после изменения пути. Есть ли лучший способ добиться такого поведения?

Другими словами, когда я нажимаю кнопку, чтобы изменить путь, происходит задержка, пока изображения старого проекта не исчезнут и будут заменены новыми.



Как изменить путь:

this.props.history.push('/project/' + this.nextCart.name);

Приложение. 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>
    )
}

Answer 1

Трудно быть уверенным без рабочего примера, с которым можно поиграть, но если он работает после небольшой задержки, это звучит так, как будто изображение загружается с сервера (например, изображение еще не было загружено, поэтому вам нужно дождаться загрузки изображения с сервера). Есть ли у вас задержка после начальной загрузки изображения? Другими словами, сохраняется ли задержка после первого отображения изображения?

Если это так, вы можете попробовать предварительно загрузить изображения после получения списка. Таким образом, они уже загружены на клиент и могут быть обработаны немедленно.

Надеюсь, это поможет.