Как перерендерить элементы в return при смене ссылки?

Question

[Даниил Чистяков]

У меня есть Route:
<Route path="/film/:film" component={Film} />
У меня есть линки, где я передаю ID:

<Link to={`/film/${res.filmId}`} >{res.nameRu}</Link>

Когда меняется ссылка (filmId), то происходит смена значений в переменной name, однако у меня подключен внешний скрипт:
<script src="..."></script>
Также есть такая разметка:
<div id="block" data-id={`${name}`}></div>
Как сделать, чтобы при изменении адреса ссылки и значения переменной name перерендерился: <div id="block" data-id={`${name}`}></div>

Comments

[Sun_Day]

Где скрипт подключается?

[Даниил Чистяков]

Sun_Day, в return, с помощью React Helmet. Возможно это неправильно, я пошёл по самому простому пути, по привычке из HTML :)
Никогда раньше не приходилось подключать внешние JS скрипты к React.

[Alexandr]

Без кода компонента ничего не понятно.

[Даниил Чистяков]

Alexandr,

import React, { useEffect, useState } from 'react'
import { useParams } from "react-router-dom";

import { Helmet, HelmetProvider } from 'react-helmet-async';

const Film = () => {
    const { film: id } = useParams();
    const [name, setName] = useState(null);

    useEffect(() => {
        setName(id)
    }, [id])

    return (
        <div>
            <Helmet>
                <script src="..."></script>
                <title>{`${name} читать историю онлайн`}</title>
            </Helmet>
            <div id="block" data-id={`${name}`}></div>
        </div>
    )
}

export default Film

[Alexandr]

Даниил Чистяков, у вас setName выполняется только при обновлении страницы. Больше не вижу ничего, что бы его вызывало для перерисовки компонента.

[Даниил Чистяков]

Alexandr, боюсь мы не поняли друг друга. Контент в блоке: <div id="block" data-id={`${name}`}></div> меняется в зависимости от того какое значение присвоено data-id. И мне нужно чтобы контент в этом блоке менялся без перезагрузки страницы, при изменении ссылки (при нажатии на какой-либо Link, который меняет значение переменной name).

[Alexandr]

Даниил Чистяков, компонент должен перерисовываться когда name, хранящийся в статусе, изменяется через специальный метод, именуемый у вас setName. Если просто присвоить в name значение, компонент перерисовываться не будет.

Второй вариант, когда ваш компонент будет перерисован, это когда перерисовывается его родитель. Про это сейчас ничего не известно.

И вообще, может быть, я старомоден... Но полагаю, что компонент со статусом и содержащий метод стоит сделать классом.

[Даниил Чистяков]

Alexandr, так, но у меня не перерисовывается компонент при изменении ссылки. Как мне это реализовать? Классовые компоненты долго пытался отпустить и не думаю возвращаться на них пока что :)

[Alexandr]

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

[Даниил Чистяков]

Alexandr, нет, в консоли ошибок не пишет. Там какая система: где-то на сервере лежит БД. Подключаемый скрипт находит инфу о фильме в зависимости от data-id={`${name}`} и выводится блок с информацией, но когда я перехожу по ссылке, которая ведёт на этот же компонент, но при этом меняется сама ссылка и переменная name, то контент в блоке не меняется, хоть и контент вне этого блока в этом компоненте меняется. Однако, если перезагрузить страницу с новым URL, то контент в блоке меняется.
UPD: проблема с неменяющимся контентом решена (не менялась переменная), теперь новая проблема: если переменная изменилась, то блок пустой.

[Alexandr]

Если name кроме этого компонента больше нигде не используется, то можно стейт вообще не использовать.

import React from 'react';
import { useParams } from "react-router-dom";

import { Helmet, HelmetProvider } from 'react-helmet-async';

const Film = () => {
    const { film } = useParams();

    return (
        <div>
            <Helmet>
                <script src="..."></script>
                <title>{`${ film } читать историю онлайн`}</title>
            </Helmet>
            <div id="block" data-id={`${ film }`}></div>
        </div>
    )
}

export default Film

[Даниил Чистяков]

Alexandr, если сделать так, то тогда не будет меняться переменная name в return, но код действительно уже немного упростил, думаю нужно что-то сделать, чтобы инициировать перезагрузку данного блока и скрипта в return при смене ссылки. Только вот как это сделать - хз.

[Alexandr]

При клике по линку компонент должен перерисоваться с новыми пропсами, и имя фильма будет обновлено из пропсов вот этой строкой const { film } = useParams();

[Mikhail Osher]

Даниил Чистяков, useRouteParams будет обновлять переменную film. Код, который привел Alexandr, делает всё необходимое. Если есть проблема, то она уже в другом месте.

[Даниил Чистяков]

Mikhail Osher, добрый день, проблема уже решена. Чтобы вставить скрипт, в таких случаях видимо корректнее использовать конструкцию:

useEffect(() => {
        const script = document.createElement('script');
        script.src = '...';
        document.body.appendChild(script);
        return () => {
            document.body.removeChild(script);
          }
    }, [id])

Тогда всё срабатывает как надо.

[Alexandr]

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

[Даниил Чистяков]

Alexandr, для того, чтобы при смене url он заново перерендерился вместе с блоком и остальным контентом, так как через Helmet есть ощущение, что ничего не происходит. А с помощью конструкции UseEffect я наконец смог прописать, что необходимо обновлять скрипт ориентируясь на dependency film.

[Даниил Чистяков]

Alexandr, но всё же есть ещё вопрос, я сейчас формирую его на CodeSandbox, меня немного смущает такая сложная конструкция (надеюсь, что проблема решится, но если что отпишу сюда, не расходимся :))

Answer 1

[Даниил Чистяков]

Может кому-то поможет:
Скрипт выносим в useEffect и ставим dependency на name.
Оборачиваем наш блок в ещё один div и прописываем ему key={film}.
Автор решения: Mikhail Osher