useState не устанавливает состояние при инициализации RouteProps

Question

У меня есть компонент, который использует useState. Состояние инициализируется свойством из RouteComponentProps. Это работает, когда я набираю URL-адрес в адресной строке браузера, но не когда URL-адрес изменяется тегом ссылки. Какая разница? Как я могу установить состояние, когда URL-адрес изменяется тегом Link?

При использовании приведенного ниже кода и перехода к / test1 отображается строка test1 / test1 из строки

{text}/{props.match.params.text}

Нажатие на ссылку «go» изменяет URL на / erik, но показывает test1 / erik. Почему?

interface RouteProps {
    text: string | undefined
}

const Test: React.FunctionComponent<RouteComponentProps<RouteProps>> = (props) => {
    const [text, setText] = useState(props.match.params.text || '');

    return (
    <div>
        <h3>{text}/{props.match.params.text}</h3>
        <Link to="/erik">Go</Link>
    </div>
    );
}

const routes = <div>
    <Route path='/:text?' component={ Test } />
</div>;

render(<BrowserRouter basename={process.env.PUBLIC_URL} children={ routes } />, document.getElementById('root'));

Вот код в Stackblitz. https://stackblitz.com/edit/react-ts-c7pvsp

Answer 1

Значение, которое вы передаете useState, будет установлено только один раз в качестве начального значения, после чего заданные вами параметры будут игнорироваться.Если вы хотите обновить текст при смене реквизита, я рекомендую использовать useEffect.Это будет выглядеть так:

useEffect(() => {
    setText(props.match.params.text || '')
}, [ props.match.params.text ]);

Функция, которую вы передаете в качестве первого аргумента useEffect, будет выполняться в зависимости от того, изменятся ли значения в массиве, который вы передаете в качестве второго аргумента.Поэтому, если текст из реквизита изменится, он выполнит функцию и установит состояние с новым значением.